diff --git a/app/index.jade b/app/index.jade index 9a357c398..f1b8a257a 100644 --- a/app/index.jade +++ b/app/index.jade @@ -27,7 +27,6 @@ html // build:css /styles/app.css //- inject:css - link(rel="stylesheet", href="assets/css/reset.css") link(rel="stylesheet", href="assets/css/vendors/angucomplete.css") link(rel="stylesheet", href="assets/css/topcoder.css") link(rel="stylesheet", href="assets/css/skill-picker/skill-picker.css") @@ -72,7 +71,6 @@ html link(rel="stylesheet", href="assets/css/directives/profile-widget.css") link(rel="stylesheet", href="assets/css/directives/page-state-header.directive.css") link(rel="stylesheet", href="assets/css/directives/ios-card.css") - link(rel="stylesheet", href="assets/css/directives/input-sticky-placeholder.css") link(rel="stylesheet", href="assets/css/directives/history-graph.css") link(rel="stylesheet", href="assets/css/directives/external-link-data.css") link(rel="stylesheet", href="assets/css/directives/external-account.css") @@ -86,6 +84,7 @@ html link(rel="stylesheet", href="assets/css/directives/badge-tooltip.css") link(rel="stylesheet", href="assets/css/community/statistics.css") link(rel="stylesheet", href="assets/css/community/members.css") + link(rel="stylesheet", href="assets/css/community/community.css") link(rel="stylesheet", href="assets/css/account/reset-password.css") link(rel="stylesheet", href="assets/css/account/registered-successfully.css") link(rel="stylesheet", href="assets/css/account/register.css") diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss index 4abcc9c99..1a743b9fe 100644 --- a/assets/css/account/account.scss +++ b/assets/css/account/account.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .login-container, .register-container, @@ -98,7 +97,7 @@ .password-tips { @media screen and (min-width: 915px) { left: 395px; - } + } } // Autocomplete @@ -257,7 +256,7 @@ display: flex; flex-flow: row wrap; margin-top: 30px; - justify-content: center; + justify-content: center; text-transform: uppercase; font-size: $label-small; @include font-with-weight('Sofia Pro', 500); @@ -290,7 +289,7 @@ .copyright-notice { color: $gray-dark; } - + } diff --git a/assets/css/account/login.scss b/assets/css/account/login.scss index d1e1fef22..d49d667ba 100644 --- a/assets/css/account/login.scss +++ b/assets/css/account/login.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .login-container { @@ -56,6 +55,6 @@ @media (min-width: 768px) { margin-bottom: 60px; } - + } -} \ No newline at end of file +} diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss index a11de1095..f1313253e 100644 --- a/assets/css/account/register.scss +++ b/assets/css/account/register.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .register-container { diff --git a/assets/css/account/registered-successfully.scss b/assets/css/account/registered-successfully.scss index 0710f8645..adea7fc54 100644 --- a/assets/css/account/registered-successfully.scss +++ b/assets/css/account/registered-successfully.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .registered-successfully-container { p { diff --git a/assets/css/account/reset-password.scss b/assets/css/account/reset-password.scss index c7e04df2f..2e9d241f0 100644 --- a/assets/css/account/reset-password.scss +++ b/assets/css/account/reset-password.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .reset-password-container { diff --git a/assets/css/community/_community.scss b/assets/css/community/community.scss similarity index 95% rename from assets/css/community/_community.scss rename to assets/css/community/community.scss index 19333ddeb..481d0009a 100644 --- a/assets/css/community/_community.scss +++ b/assets/css/community/community.scss @@ -1,26 +1,34 @@ +@import 'tc-includes'; + .community-view { background: $gray-lighter; color: $community-text-dark; + .header-community { @include module-full-width; background-color: $white; @include font-with-weight('Sofia Pro', 500); box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3); + header { text-align: center; margin: 0 auto; padding: 16px 0 13px; + h1 { font-size: 22px; line-height: 26px; text-transform: uppercase; } } + @media only screen and (min-width: 1000px) { box-shadow: none; + header { text-align: left; padding: 33px 0 37px 128px; + h1 { font-size: 32px; } diff --git a/assets/css/community/members.scss b/assets/css/community/members.scss index 760cd634c..bce1b373b 100644 --- a/assets/css/community/members.scss +++ b/assets/css/community/members.scss @@ -1,13 +1,16 @@ -@import '../partials/combined'; -@import 'community'; +@import 'tc-includes'; + .members-container { padding: 15px 0 0; + a { text-decoration: none; } + @media only screen and (min-width: 1070px) { padding: 60px 67px 0; } + %reviewboard-panel { background: $white; padding: 10px; @@ -37,17 +40,20 @@ } } } + .platform-stats-container { background: $white; padding: 10px; margin-bottom: 6px; height: 70px; font-family: "Sofia Pro",Arial,Helvetica,sans-serif; + .stat { float: left; width: 25% ; text-align: center; } + .statVal { color: #3d3d3d; font-size: 32px; @@ -61,6 +67,7 @@ font-weight: 400; } } + .search-container { @include module-full-width; background: $white; @@ -68,6 +75,7 @@ @media only screen and (min-width: 1070px) { padding: 30px 40px 30px 41px; } + form { @include module-full-width; @include community-form-placeholder; @@ -80,6 +88,7 @@ border-radius: 7px; } } + input[type="text"] { @include module-full-width; @include font-with-weight('Sofia Pro', 300); @@ -91,6 +100,7 @@ font-size: 22px; } } + .search-ico { display: inline-block; height: 15px; @@ -112,6 +122,7 @@ } } } + h2 { @include font-with-weight('Sofia Pro', 500); font-size: 20px; @@ -120,6 +131,7 @@ padding-top: 31px; padding-bottom: 17px; position: relative; + small { @include font-with-weight; font-size: 16px; @@ -128,9 +140,11 @@ color: $gray-dark-alt; padding-top: 8px; } + span { color: $member-search-highlight; } + @media only screen and (min-width: 1070px) { font-size: 28px; padding-top: 92px; @@ -141,12 +155,14 @@ } } } + .default-show-container > div, .search-result-container { margin-top: 6px; background: $white; position: relative; } + %members-gray-wrapper { background: $gray-lightest; border: { diff --git a/assets/css/community/statistics.scss b/assets/css/community/statistics.scss index 795f38789..1b1171487 100644 --- a/assets/css/community/statistics.scss +++ b/assets/css/community/statistics.scss @@ -1,5 +1,5 @@ -@import '../partials/combined'; -@import 'community'; +@import 'tc-includes'; + .statistics-container { margin-top: 15px; @@ -10,10 +10,12 @@ @media only screen and (min-width: 1030px) { margin: 60px 67px; } + %statistics-panel { background: $white; padding: 10px; margin-bottom: 6px; + h2 { @include font-with-weight('Sofia Pro', 700); font-size: 18px; @@ -26,6 +28,7 @@ padding-top: 82px; padding-bottom: 82px; } + small { font-size: 16px; display: block; @@ -33,11 +36,13 @@ color: $gray-dark-alt; padding-top: 8px; } + span { color: $member-search-highlight; } } } + .winner-tile { @include font-with-weight; display: flex; diff --git a/assets/css/directives/challenge-links.directive.scss b/assets/css/directives/challenge-links.directive.scss index ca7a54597..23b4c6478 100644 --- a/assets/css/directives/challenge-links.directive.scss +++ b/assets/css/directives/challenge-links.directive.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .challenge-links.tile-view { display: flex; @@ -57,7 +56,7 @@ @include background-image-size(20px, 17px); background-image: url(/images/ico-posts.svg); } -} +} .challenge-links.list-view { display: flex; @@ -115,4 +114,4 @@ @include background-image-size(30px, 27px); background-image: url(/images/ico-posts.svg); } -} \ No newline at end of file +} diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 35fb4fd00..faf109b80 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // Default Challenge Tile Stylings challenge-tile .challenge.tile-view { @@ -232,7 +231,7 @@ challenge-tile .challenge.tile-view { &.DATA_SCIENCE { flex: 2; justify-content: center; - } + } .marathon-score { margin-bottom: 70px; @@ -331,7 +330,7 @@ challenge-tile .challenge.list-view { color: $gray-darkest; @include ellipsis; - + span:first-child { color: $accent-gray; white-space: nowrap; diff --git a/assets/css/directives/design-challenge-user-place.scss b/assets/css/directives/design-challenge-user-place.scss index 4ac0b66f8..db6b814be 100644 --- a/assets/css/directives/design-challenge-user-place.scss +++ b/assets/css/directives/design-challenge-user-place.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // styling for tile view design-challenge-user-place { diff --git a/assets/css/directives/dev-challenge-user-place.scss b/assets/css/directives/dev-challenge-user-place.scss index 4feee556b..6d1e2df4c 100644 --- a/assets/css/directives/dev-challenge-user-place.scss +++ b/assets/css/directives/dev-challenge-user-place.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // styling for tile view dev-challenge-user-place { @@ -48,7 +47,7 @@ dev-challenge-user-place { } } } - + } // styling for list view @@ -122,4 +121,4 @@ dev-challenge-user-place { } } } -} \ No newline at end of file +} diff --git a/assets/css/directives/distribution-graph.scss b/assets/css/directives/distribution-graph.scss index ceaea2afd..8f7669262 100644 --- a/assets/css/directives/distribution-graph.scss +++ b/assets/css/directives/distribution-graph.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .distribution-graph-directive { display: flex; diff --git a/assets/css/directives/empty-state-placeholder.scss b/assets/css/directives/empty-state-placeholder.scss index 60cdf9828..cc1cbf232 100644 --- a/assets/css/directives/empty-state-placeholder.scss +++ b/assets/css/directives/empty-state-placeholder.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .empty-state-placeholder { display: flex; @@ -125,4 +124,4 @@ } } } -} \ No newline at end of file +} diff --git a/assets/css/directives/external-account.scss b/assets/css/directives/external-account.scss index 8462904af..4467117ec 100644 --- a/assets/css/directives/external-account.scss +++ b/assets/css/directives/external-account.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .ext-tile { display: flex; diff --git a/assets/css/directives/external-link-data.scss b/assets/css/directives/external-link-data.scss index c3e86a375..3c068ce80 100644 --- a/assets/css/directives/external-link-data.scss +++ b/assets/css/directives/external-link-data.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; external-accounts { display: flex; diff --git a/assets/css/directives/history-graph.scss b/assets/css/directives/history-graph.scss index 7b4f513a1..fc48cd6e7 100644 --- a/assets/css/directives/history-graph.scss +++ b/assets/css/directives/history-graph.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .history-graph-directive { display: flex; diff --git a/assets/css/directives/input-sticky-placeholder.scss b/assets/css/directives/input-sticky-placeholder.scss deleted file mode 100644 index 7dbf40d78..000000000 --- a/assets/css/directives/input-sticky-placeholder.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss index df89491fd..f11b2ddde 100644 --- a/assets/css/directives/ios-card.scss +++ b/assets/css/directives/ios-card.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // Default Challenge Tile Stylings ios-card .challenge.tile-view { diff --git a/assets/css/directives/page-state-header.directive.scss b/assets/css/directives/page-state-header.directive.scss index ae0413d16..6c33ecf33 100644 --- a/assets/css/directives/page-state-header.directive.scss +++ b/assets/css/directives/page-state-header.directive.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .page-state-header { background-color: $gray-lightest; diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss index c77a7134d..688636b66 100644 --- a/assets/css/directives/profile-widget.scss +++ b/assets/css/directives/profile-widget.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .profile-widget-directive { display: flex; @@ -93,7 +92,7 @@ display: flex; flex-direction: row; justify-content: center; - + .track { cursor: pointer; display: flex; diff --git a/assets/css/directives/responsive-carousel.scss b/assets/css/directives/responsive-carousel.scss index f4bc6f93a..919b84735 100644 --- a/assets/css/directives/responsive-carousel.scss +++ b/assets/css/directives/responsive-carousel.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .tc-carousel { diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index 2b4c9f7ba..57b2a0a9c 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; skill-tile { display: flex; diff --git a/assets/css/directives/srm-tile.scss b/assets/css/directives/srm-tile.scss index 6d4569999..348f9c780 100644 --- a/assets/css/directives/srm-tile.scss +++ b/assets/css/directives/srm-tile.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // common styles for both list and tile view .srm { diff --git a/assets/css/directives/tc-paginator.scss b/assets/css/directives/tc-paginator.scss index abd575f30..b28765591 100644 --- a/assets/css/directives/tc-paginator.scss +++ b/assets/css/directives/tc-paginator.scss @@ -1,6 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; - +@import 'tc-includes'; .tc-paginator { display: flex; diff --git a/assets/css/directives/tc-section.scss b/assets/css/directives/tc-section.scss index 3a1f03d47..b47021ac6 100644 --- a/assets/css/directives/tc-section.scss +++ b/assets/css/directives/tc-section.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .tc-section { min-height: 100px; diff --git a/assets/css/directives/tc-tabs.scss b/assets/css/directives/tc-tabs.scss index b8debb173..71bbf724c 100644 --- a/assets/css/directives/tc-tabs.scss +++ b/assets/css/directives/tc-tabs.scss @@ -1,5 +1,5 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; + .tab-panel { .tab-set { display: flex; @@ -11,18 +11,22 @@ border-top: 1px solid $gray-light; border-bottom: 1px solid $gray-light; background-color: $gray-lightest; + li { height: 30px; + a { text-align: center; color: $accent-gray; // padding-top: 6px; + .header { font-size: 18px; line-height: 24px; @include sofia-pro-medium; text-transform: uppercase; margin: auto 45px; + &.selected { color: $gray-darkest; padding-bottom: 14px; @@ -30,18 +34,16 @@ } } } + a:hover { color: $accent-gray-dark; } } } - .tab-view {} } .page-header + tc-tab-set { - .tab-panel .tab-set { - border-top: none; - } + .tab-panel .tab-set { + border-top: none; } - - +} diff --git a/assets/css/directives/toggle-password-with-tips.scss b/assets/css/directives/toggle-password-with-tips.scss index c8b794222..daaceb362 100644 --- a/assets/css/directives/toggle-password-with-tips.scss +++ b/assets/css/directives/toggle-password-with-tips.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // Toggle password with password tips directive toggle-password-with-tips { diff --git a/assets/css/directives/toggle-password.scss b/assets/css/directives/toggle-password.scss index a8637a299..b9b0381c0 100644 --- a/assets/css/directives/toggle-password.scss +++ b/assets/css/directives/toggle-password.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // Toggle password directive toggle-password { diff --git a/assets/css/directives/track-toggle.scss b/assets/css/directives/track-toggle.scss index 586b691ae..410d05f8b 100644 --- a/assets/css/directives/track-toggle.scss +++ b/assets/css/directives/track-toggle.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; track-toggle { border-top: 1px solid $gray-light; @@ -20,7 +19,7 @@ track-toggle { display: flex; flex-direction: column; align-items: left; - + .content { display: flex; flex-direction: row; diff --git a/assets/css/layout/footer.scss b/assets/css/layout/footer.scss index d8e2bb049..349caa546 100644 --- a/assets/css/layout/footer.scss +++ b/assets/css/layout/footer.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .bottom-footer { background-color: $gray-darkest; diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss index 6c0625395..5e2d4a9fc 100644 --- a/assets/css/layout/header.scss +++ b/assets/css/layout/header.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; #header { @include clearfix; @@ -81,7 +80,7 @@ content: ''; background: url('/images/badge-beta.svg'); background-size: contain; - background-repeat: no-repeat; + background-repeat: no-repeat; display: block; width: 37px; height: 17px; diff --git a/assets/css/my-challenges/my-challenges.scss b/assets/css/my-challenges/my-challenges.scss index 32701edd0..0360848b4 100644 --- a/assets/css/my-challenges/my-challenges.scss +++ b/assets/css/my-challenges/my-challenges.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .my-challenges-links, .srms-links, diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss index c0b67247d..0ff1a03bd 100644 --- a/assets/css/my-dashboard/community-updates.scss +++ b/assets/css/my-dashboard/community-updates.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .community-updates { display: flex; diff --git a/assets/css/my-dashboard/header-dashboard.scss b/assets/css/my-dashboard/header-dashboard.scss index 9e0ab0dbf..a858b8136 100644 --- a/assets/css/my-dashboard/header-dashboard.scss +++ b/assets/css/my-dashboard/header-dashboard.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .header-dashboard { margin-top: 15px; @@ -22,4 +21,4 @@ margin-left: auto; margin-right: auto; } -} \ No newline at end of file +} diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss index b7a0eb898..385e47cc1 100644 --- a/assets/css/my-dashboard/my-challenges.scss +++ b/assets/css/my-dashboard/my-challenges.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .challenges { header { diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss index 98f91732b..27f9f09b0 100644 --- a/assets/css/my-dashboard/my-dashboard.scss +++ b/assets/css/my-dashboard/my-dashboard.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .my-dashboard-container { display: flex; diff --git a/assets/css/my-dashboard/programs.scss b/assets/css/my-dashboard/programs.scss index d8c811117..f4025b222 100644 --- a/assets/css/my-dashboard/programs.scss +++ b/assets/css/my-dashboard/programs.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .programs { diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss index 0c3b8b61a..b47631f0a 100644 --- a/assets/css/my-dashboard/srms.scss +++ b/assets/css/my-dashboard/srms.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .srms { min-height: 50px; diff --git a/assets/css/my-dashboard/subtrack-stats.scss b/assets/css/my-dashboard/subtrack-stats.scss index 06ea40bd6..32d1c3421 100644 --- a/assets/css/my-dashboard/subtrack-stats.scss +++ b/assets/css/my-dashboard/subtrack-stats.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .subtrack-stats { .ratings { diff --git a/assets/css/my-srms/my-srms.scss b/assets/css/my-srms/my-srms.scss index fe3caf7ee..0d425a52e 100644 --- a/assets/css/my-srms/my-srms.scss +++ b/assets/css/my-srms/my-srms.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .my-srms-container { width: 100%; diff --git a/assets/css/partials/_combined.scss b/assets/css/partials/_combined.scss deleted file mode 100644 index 37190d6fd..000000000 --- a/assets/css/partials/_combined.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'tc-colors'; -@import 'tc-mixins'; -@import 'tc-buttons'; -@import 'tc-inputs'; -@import 'tc-typography'; -@import 'tc-variables'; diff --git a/assets/css/reset.scss b/assets/css/partials/_reset.scss similarity index 100% rename from assets/css/reset.scss rename to assets/css/partials/_reset.scss diff --git a/assets/css/partials/_tc-buttons.scss b/assets/css/partials/_tc-buttons.scss index bf00b425f..b971446b1 100644 --- a/assets/css/partials/_tc-buttons.scss +++ b/assets/css/partials/_tc-buttons.scss @@ -1,8 +1,4 @@ -// Topcoder Buttons -// tc- is the default prefixe that we use for all classes - -@import 'topcoder-includes'; - +@import 'tc-includes'; a, button { @@ -64,7 +60,6 @@ a.tc-btn, button.tc-btn { cursor: default; } - &.tc-btn-secondary { border-color: $gray; background-color: $gray; diff --git a/assets/css/partials/_tc-colors.scss b/assets/css/partials/_tc-colors.scss index acb05c0e2..28eb79db8 100644 --- a/assets/css/partials/_tc-colors.scss +++ b/assets/css/partials/_tc-colors.scss @@ -1,5 +1,4 @@ // TOPCODER Brand palette -// We should use those variables instead of color values; $primary: #0096FF; $primary-dark: #097DCE; $primary-dark2: darken($primary, 20%); @@ -8,7 +7,6 @@ $primary-light2: lighten($primary, 70%); $primary-lighter: #F2FAFF; $primary-lighter2: lighten($primary, 90%); - $error: #F31D3D; $error-dark: #C70E2A; $error-light: #FCBBC5; @@ -43,13 +41,9 @@ $data_science: #FC9A00; $develop: #05C14F; $copilot: #7D939E; - - -// Old colors that we should clean. Don't reference or use in new modules! - +// Old colors that need to be removed. Don't reference or use in new modules! $light-black: #333; -// grays $light-gray : #929292; $medium-gray : #eee; $dark-gray : #666; @@ -60,19 +54,16 @@ $horizontal-rule : #e1e1e1; $input-background: #3f4143; $gray-dark-alt: #ADADB7; -// oranges $tc-btn-light-orange: #f90; $tc-btn-dark-orange : #ff7a00; $light-orange : #ffb800; $dark-orange : #ff8a00; -// blues $light-blue : #00aeff; $dark-blue : #0096ff; $review-blue: #0071bc; $login-blue : #26A9E0; -// Refactor and get rid of these: $ui-page-gray: #f1f2f2; $ui-dark-gray: #231F20; diff --git a/assets/css/partials/_tc-inputs.scss b/assets/css/partials/_tc-forms.scss similarity index 91% rename from assets/css/partials/_tc-inputs.scss rename to assets/css/partials/_tc-forms.scss index d56edae9f..7a6f47503 100644 --- a/assets/css/partials/_tc-inputs.scss +++ b/assets/css/partials/_tc-forms.scss @@ -1,16 +1,8 @@ -// Topcoder Inputs -// tc- is the default prefix that we use for all classes -@import 'topcoder-includes'; - - -// -// TOPCODER FORMS AND FIELDS SECTION +// TOPCODER FORMS AND FIELDS SECTION // ---------------------------------------------------------------------- // Topcoder Inputs -// tc- is the default prefix that we use for all classes //Empty state - input, textarea, .tc-input, @@ -68,7 +60,7 @@ input:focus { textarea { padding: 10px; line-height: 24px; - + @include placeholder { color: $accent-gray; font-weight: 300; diff --git a/assets/css/partials/_tc-includes.scss b/assets/css/partials/_tc-includes.scss new file mode 100644 index 000000000..381c6dc17 --- /dev/null +++ b/assets/css/partials/_tc-includes.scss @@ -0,0 +1,3 @@ +@import 'tc-colors'; +@import 'tc-variables'; +@import 'tc-mixins'; diff --git a/assets/css/partials/_tc-lists.scss b/assets/css/partials/_tc-lists.scss new file mode 100644 index 000000000..80297baee --- /dev/null +++ b/assets/css/partials/_tc-lists.scss @@ -0,0 +1,11 @@ +ul.color-even { + > li:nth-child(even) { + background-color: #eee; + } +} + +ul.color-odd { + > li:nth-child(odd) { + background-color: #eee; + } +} diff --git a/assets/css/partials/_tc-mixins.scss b/assets/css/partials/_tc-mixins.scss index a71c34df0..d2c042741 100644 --- a/assets/css/partials/_tc-mixins.scss +++ b/assets/css/partials/_tc-mixins.scss @@ -1,30 +1,23 @@ -@import '_tc-variables'; - -// SPECIFY FONTS THE SMART WAY -// ---------------------------------------------------------------------------- -// Instead of repeating the use of fonts, we can build a simple mixin to do that for us @mixin font-with-weight($family: 'Sofia Pro', $weight: 400, $fallback: sans-serif){ @if $fallback == serif { font-family: $family, $fonts-family-serif; - font-weight: $weight; - + font-weight: $weight; } @else if $fallback == sans-serif { font-family: $family, $fonts-family-sans-serif; - font-weight: $weight; + font-weight: $weight; } @else if $fallback == monospace { font-family: $family, $fonts-family-monospace; - font-weight: $weight; + font-weight: $weight; } @else { font-family: $family, $fonts-family-monospace; - font-weight: $familyt-base; + font-weight: $familyt-base; } } - // Placeholders refactored // ---------------------------------------------------------------------------- // from 'http://stackoverflow.com/questions/17181849/placeholder-mixin-scss-css' @@ -37,7 +30,7 @@ // } // } -// @include placeholder { +// @include placeholder { // color: red; // } @@ -71,13 +64,13 @@ &::-webkit-input-placeholder {@content} &:-moz-placeholder {@content} &::-moz-placeholder {@content} - &:-ms-input-placeholder {@content} + &:-ms-input-placeholder {@content} } // // Pass a number, and use in different places. How to use: -// +// // @include media(320px) { // background: red; // the content will be wrapped with the mixin; // } @@ -370,7 +363,7 @@ // :-moz-placeholder { /* Firefox 18- */ // color: #B7B7B7; // } - // TODO REMOVED: use _tc-inputs !!!! + // TODO REMOVED: use _tc-inputs !!!! } @mixin community-form-placeholder { diff --git a/assets/css/partials/_tc-spinners.scss b/assets/css/partials/_tc-spinners.scss new file mode 100644 index 000000000..0eb143319 --- /dev/null +++ b/assets/css/partials/_tc-spinners.scss @@ -0,0 +1 @@ +$spinner: url(/icons/gifs/ripple.gif); diff --git a/assets/css/partials/_tc-styles.scss b/assets/css/partials/_tc-styles.scss new file mode 100644 index 000000000..420dbf9d0 --- /dev/null +++ b/assets/css/partials/_tc-styles.scss @@ -0,0 +1,20 @@ +@import 'tc-includes'; +@import 'reset'; +@import 'tc-buttons'; +@import 'tc-typography'; +@import 'tc-forms'; +@import 'tc-spinners'; +@import 'tc-lists'; + +html { + min-height: 100%; + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + min-height: 100%; +} diff --git a/assets/css/partials/_tc-typography.scss b/assets/css/partials/_tc-typography.scss index 918d8d997..6204c87d3 100644 --- a/assets/css/partials/_tc-typography.scss +++ b/assets/css/partials/_tc-typography.scss @@ -1,7 +1,6 @@ // FONT STACK // -------------------------------------------------------------------------------------------- -// Use the mixin to include fonts. The power of Sass to the boring CSS repeat. -// DON'T REPEAT YOURSELF! +// Use the mixin to include fonts. @mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) { @font-face { @@ -14,15 +13,13 @@ url('#{$font-url}-webfont.svg##{$font-file}') format('svg'); font-weight: $font-weight; font-style: $font-style; - } } - // FONT WEIGHTS // -------------------------------------------------------------------------------------------- -// Use the numerical value instead of the weight name; -// +// Use the numerical value instead of the weight name. +// // 100 Thin (Hairline) // 200 Extra Light (Ultra Light) // 300 Light @@ -33,7 +30,7 @@ // 800 Extra Bold (Ultra Bold) // 900 Black (Heavy) - // Sofia Pro +// Sofia Pro @include font-family('Sofia Pro', 700, normal, '/fonts/sofiapro/', 'sofiapro-bold'); // Bold @include font-family('Sofia Pro', 700, italic, '/fonts/sofiapro/', 'sofiapro-bold-italic'); // Bold Italic @include font-family('Sofia Pro', 600, normal, '/fonts/sofiapro/', 'sofiapro-semibold'); // Semibold @@ -45,7 +42,7 @@ @include font-family('Sofia Pro', 300, normal, '/fonts/sofiapro/', 'sofiapro-light'); // Light @include font-family('Sofia Pro', 300, italic, '/fonts/sofiapro/', 'sofiapro-light-italic'); // Light Italic - // Merriweather Sans +// Merriweather Sans @include font-family('Merriweather Sans', 700, normal, '/fonts/merriweather-sans/', 'merriweathersans-bold'); // Bold @include font-family('Merriweather Sans', 700, italic, '/fonts/merriweather-sans/', 'merriweathersans-bolditalic'); // Bold Italic @include font-family('Merriweather Sans', 400, normal, '/fonts/merriweather-sans/', 'merriweathersans-regular'); // Regular diff --git a/assets/css/partials/_tc-variables.scss b/assets/css/partials/_tc-variables.scss index 0d4bb7547..1f04e8827 100644 --- a/assets/css/partials/_tc-variables.scss +++ b/assets/css/partials/_tc-variables.scss @@ -3,14 +3,13 @@ // Font, line-height, and color for body text, headings, and more. $text-rendering: auto; -$fonts-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$fonts-family-serif: Georgia, "Times New Roman", Times, serif !default; -$fonts-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; -$fonts-family-base: $fonts-family-sans-serif !default; - +$fonts-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$fonts-family-serif: Georgia, "Times New Roman", Times, serif !default; +$fonts-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$fonts-family-base: $fonts-family-sans-serif !default; // The label is showing in many places; particulary on data/stats -$label-xs: 10px; -$label-small: 12px; -$label-medium: 14px; -$label-large: 16px; +$label-xs: 10px; +$label-small: 12px; +$label-medium: 14px; +$label-large: 16px; diff --git a/assets/css/peer-review/completed.scss b/assets/css/peer-review/completed.scss index 95c27f351..628cbeb8f 100644 --- a/assets/css/peer-review/completed.scss +++ b/assets/css/peer-review/completed.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .completed-review-container { diff --git a/assets/css/peer-review/edit.scss b/assets/css/peer-review/edit.scss index 10f586834..bf80d6910 100644 --- a/assets/css/peer-review/edit.scss +++ b/assets/css/peer-review/edit.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .edit-review-container { #review-form { diff --git a/assets/css/peer-review/peer-review.scss b/assets/css/peer-review/peer-review.scss index 3a0e9f309..b9fd23ff9 100644 --- a/assets/css/peer-review/peer-review.scss +++ b/assets/css/peer-review/peer-review.scss @@ -1,5 +1,5 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; +// Remove glyphicon reference and mixin when peer-review is redesigned. @include glyphicons-halflings; // Shared (review-status.html, edit-review.html, completed-review.html) diff --git a/assets/css/peer-review/readOnlyScorecard.scss b/assets/css/peer-review/readOnlyScorecard.scss index 78e3515ca..585fab6fb 100644 --- a/assets/css/peer-review/readOnlyScorecard.scss +++ b/assets/css/peer-review/readOnlyScorecard.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .read-only-scorecard-container { #read-only p:last-child { diff --git a/assets/css/peer-review/reviewStatus.scss b/assets/css/peer-review/reviewStatus.scss index 2c93dfa37..7e3cd5830 100644 --- a/assets/css/peer-review/reviewStatus.scss +++ b/assets/css/peer-review/reviewStatus.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .review-status-container { h1 { diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index b84f7eb8f..a168421d2 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; // Main container // This is the flex container; we convert it to 2 column layout on >767px width @@ -101,7 +100,7 @@ text-align: center; margin-left: auto; margin-right: auto; - + .list { display: flex; flex-direction: row; @@ -123,7 +122,7 @@ + .skill { margin-left: 15px; } - + &:nth-child(3n + 1) { // margin-left: 0px; } @@ -140,14 +139,14 @@ -webkit-transition: all 0.5s; } - + h1 { font-size: 25px; margin: auto; } .empty-state { - + .sample-skills { margin: 0px auto; display: flex; @@ -155,14 +154,14 @@ justify-content: center; flex-wrap: wrap; width: 100%; - + .skill { width: 130px; opacity: 0.3; a { cursor: default; } - } + } } } @@ -203,7 +202,7 @@ } .name { - margin: auto; + margin: auto; font-size: 20px; line-height: 24px; margin-bottom: 10.6px; @@ -330,7 +329,7 @@ } .empty-state { - + .sample-ext-accounts { margin: 0px auto; display: flex; @@ -351,7 +350,7 @@ a { cursor: default; } - } + } } } @@ -371,7 +370,7 @@ flex-direction: column; padding-top: 0px; padding-bottom: 0px; - + .list { display: flex; flex-direction: row; @@ -379,7 +378,7 @@ padding-left: 30px; padding-right: 30px; margin: 0px auto 30px auto; - + .skill { margin-top: 30px; margin-right: 15px; @@ -389,12 +388,12 @@ + .skill { margin-left: 15px; } - + &:nth-child(3n + 1) { margin-left: 15px !important; border: 1px solid lime; } - + .leftButton, .rightButton { height: 100px; display: flex; diff --git a/assets/css/profile/badges.scss b/assets/css/profile/badges.scss index 6c030aade..fe70d7523 100644 --- a/assets/css/profile/badges.scss +++ b/assets/css/profile/badges.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .ngdialog.ngdialog-theme-default { padding: 0; diff --git a/assets/css/profile/header.scss b/assets/css/profile/header.scss index 0b98dd5df..d10f17e1d 100644 --- a/assets/css/profile/header.scss +++ b/assets/css/profile/header.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .profile-container { display: flex; diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index d5c4b1161..5436c43f9 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .profile-subtrack-container { display: flex; diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss index 4505cc9e7..385923a8a 100644 --- a/assets/css/settings/account-info.scss +++ b/assets/css/settings/account-info.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .account-info-container { // padding-bottom: 75px; diff --git a/assets/css/settings/edit-profile.scss b/assets/css/settings/edit-profile.scss index 48083432a..4a8daf0ea 100644 --- a/assets/css/settings/edit-profile.scss +++ b/assets/css/settings/edit-profile.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .edit-profile-container { .edit-image { diff --git a/assets/css/settings/preferences.scss b/assets/css/settings/preferences.scss index d1f653f9d..dae09495a 100644 --- a/assets/css/settings/preferences.scss +++ b/assets/css/settings/preferences.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .preferences-container { padding-bottom: 25px; diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss index 3e4798a18..e6b9437ea 100644 --- a/assets/css/settings/settings.scss +++ b/assets/css/settings/settings.scss @@ -1,7 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; - - +@import 'tc-includes'; .settings-header { @include module-full-width; @@ -53,7 +50,7 @@ color: $gray-darkest; } // Autocomplete end - + @include module-l; margin: 30px auto 0; @@ -198,7 +195,7 @@ padding-left: 60px; width: 65%; } - + .form-field { @include form-field; @include ui-form-placeholder; @@ -315,7 +312,7 @@ text-transform: uppercase; } - + .list { display: flex; diff --git a/assets/css/settings/update-password.scss b/assets/css/settings/update-password.scss index 5dae2f3ae..bfda52bc6 100644 --- a/assets/css/settings/update-password.scss +++ b/assets/css/settings/update-password.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .update-password-container { .reset-password form { diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss index e04c8f6e7..3111b2bfd 100644 --- a/assets/css/skill-picker/skill-picker.scss +++ b/assets/css/skill-picker/skill-picker.scss @@ -1,5 +1,4 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; +@import 'tc-includes'; .skill-picker-container { @include module-l; diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index b6ffc5545..e20003b70 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -1,5 +1,4 @@ -@import 'partials/combined'; -@import 'topcoder-styles'; +@import 'tc-styles'; @include glyphicons-halflings; body { diff --git a/assets/css/vendors/angucomplete.scss b/assets/css/vendors/angucomplete.scss index f135ef28c..934df802d 100644 --- a/assets/css/vendors/angucomplete.scss +++ b/assets/css/vendors/angucomplete.scss @@ -1,9 +1,6 @@ -@import 'topcoder-includes'; -@import '../partials/combined'; - - -// aNGucomplete overrides +@import 'tc-includes'; +// angucomplete overrides .angucomplete-holder { position: relative; width: 100%; @@ -72,4 +69,4 @@ background-size: contain; height: 34px; width: 34px; -} \ No newline at end of file +} diff --git a/gulpfile.js b/gulpfile.js index 47c54d2c3..fafe806ab 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -47,11 +47,13 @@ gulp.task('styles', ['clean-styles'], function() { log('Compiling Sass --> CSS'); var assetPrefix = envConfig.CONSTANTS.ASSET_PREFIX.length ? envConfig.CONSTANTS.ASSET_PREFIX : '/'; - return gulp .src(config.sass, {base: './'}) - .pipe($.plumber()) - .pipe($.sass({includePaths: [require('tc-ui-kit').includePaths]})) + .pipe($.plumber()) + // Put back when we move the ui kit back to the external github repo + // .pipe($.sass({includePaths: [require('tc-ui-kit').includePaths]})) + // Replace with line above when ui kit is external again + .pipe($.sass({includePaths: [config.assets + 'css/partials']})) .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 f547a5aeb..a295e9805 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,5 @@ "wiredep": "^2.2.2", "yargs": "^3.12.0" }, - "dependencies": { - "tc-ui-kit": "0.0.x" - } + "dependencies": {} }