diff --git a/.gitignore b/.gitignore index 69bbaf3e..05fdafce 100644 --- a/.gitignore +++ b/.gitignore @@ -44,8 +44,10 @@ wp/wp-content/themes/tcs-responsive/config/env.php *.asf *.wmv *.avi +*.bat # ignore custom config files node_modules/ dist/ -tmp/ \ No newline at end of file +tmp/ +npm-debug.log \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index aa14ec15..10a67efa 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -301,6 +301,6 @@ module.exports = function(grunt) { // Default task. grunt.registerTask('default', ['gitinfo', 'clean', 'buildPackages:dist', 'copy', 'replace', 'concat', 'cssmin', 'uglify', 'compress', 'writeConfig']); - grunt.registerTask('dev', ['debug', 'watch']) + grunt.registerTask('dev', ['gitinfo', 'debug', 'watch']) grunt.registerTask('debug', ['clean', 'buildPackages:debug', 'copy', 'replace', 'concat', 'cssmin', 'writeConfig']); }; diff --git a/challenge-details-update.md b/challenge-details-update.md new file mode 100644 index 00000000..0e0975d8 --- /dev/null +++ b/challenge-details-update.md @@ -0,0 +1,13 @@ +# V3 SCSS update +## Challenge details updates: +- The challenge details page has been updated. To test with dynamic content visit : +http://local.topcoder.com/challenge-details/30058529/?type=design +http://local.topcoder.com/challenge-details/30058433/?type=design +local.topcoder.com/challenge-details/30058495/?type=develop + +or any other challenge. + + +## Styleguide +The static styleguide section has been added at the bottom of the contest listing page. +To test in production a dummy/draft contest can be created from the topcoder-direct portal with content same as the styleguide content. diff --git a/src/css/main-v3.css b/src/css/main-v3.css new file mode 100644 index 00000000..33c2b7d3 --- /dev/null +++ b/src/css/main-v3.css @@ -0,0 +1,784 @@ +@charset "UTF-8"; +/** + * © 2017 Topcoder + * + * v3.0.0: hi4sandy + */ +/* BEGIN Bold */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Bold/Roboto-Bold.woff?v=2.137") format("woff"); + font-weight: 700; + font-style: normal; } + +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Bold/Roboto-Bold.woff?v=2.137") format("woff"); + font-weight: bold; + font-style: normal; } + +/* BEGIN Bold Italic */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff"); + font-weight: 700; + font-style: italic; } + +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff"); + font-weight: bold; + font-style: italic; } + +/* BEGIN Medium */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Medium/Roboto-Medium.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Medium/Roboto-Medium.woff?v=2.137") format("woff"); + font-weight: 500; + font-style: normal; } + +/* BEGIN Medium Italic */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff?v=2.137") format("woff"); + font-weight: 500; + font-style: italic; } + +/* BEGIN Regular */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Regular/Roboto-Regular.woff?v=2.137") format("woff"); + font-weight: 400; + font-style: normal; } + +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Regular/Roboto-Regular.woff?v=2.137") format("woff"); + font-weight: normal; + font-style: normal; } + +/* BEGIN Italic */ +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Italic/Roboto-Italic.woff?v=2.137") format("woff"); + font-weight: 400; + font-style: italic; } + +@font-face { + font-family: Roboto; + src: url("../fonts/Roboto/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("../fonts/Roboto/Italic/Roboto-Italic.woff?v=2.137") format("woff"); + font-weight: normal; + font-style: italic; } + +/* END Italic */ +/* normalize css */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +.challenge-main-col pre, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video, +input, +textarea, +main { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +main, +nav, +section { + display: block; } + +body { + background: #fff; + font-family: 'Roboto', arial, sans-serif; + line-height: 1.2; + font-size: 16px; } + +a, +a:hover, +a:active, +a:focus { + text-decoration: none; + cursor: pointer; + outline: none; } + +a:visited, +a:focus { + outline: none; } + +ol, +ul, +li { + list-style: none; } + +blockquote, +q { + quotes: none; } + +i, em { + font-style: italic; } + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } + +h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; + font-weight: normal; + font-family: 'Roboto', arial, sans-serif; } + +table { + border-spacing: 0; + border-collapse: collapse; } + +strong { + font-weight: 700; } + +input, +textarea { + font-family: 'Roboto', arial, sans-serif; + outline: none; + box-shadow: none; } + +input::-webkit-input-placeholder { + color: #aaa; } + +input::-moz-input-placeholder { + color: #aaa; } + +input:-ms-input-placeholder, +input:-ms-input-placeholder { + color: #aaa; } + +textarea::-webkit-input-placeholder { + color: #aaa; } + +textarea::-moz-input-placeholder { + color: #aaa; } + +textarea:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #aaa; } + +textarea { + overflow: auto; } + +svg:not(:root) { + overflow: hidden; } + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; } + +input[type="search"]::-ms-clear { + display: none; } + +input::-ms-clear { + display: none; } + +button { + outline: none; } + +.btn-v3, .btn-v3-secondary, .btn-v3-clear, .btn-v3-primary { + display: block; + text-align: center; + height: 40px; + line-height: 40px; + background-color: #1A85FF; + color: #FAFAFB; + font-size: 15px; + font-weight: 500; + border-radius: 4px; + text-align: center; + font-weight: 500; + cursor: pointer; + border: none; + margin: 0; + padding-right: 6px; + padding-left: 6px; + transition: .3s; } + .btn-v3.inline, .inline.btn-v3-secondary, .inline.btn-v3-clear, .inline.btn-v3-primary { + white-space: no-wrap; + text-overflow: ellipsis; + overflow: hidden; } + .btn-v3.btn-v3-xs, .btn-v3-xs.btn-v3-secondary, .btn-v3-xs.btn-v3-clear, .btn-v3-xs.btn-v3-primary { + height: 20px; + line-height: 20px; + font-size: 12px; } + .btn-v3.btn-v3-sm, .btn-v3-sm.btn-v3-secondary, .btn-v3-sm.btn-v3-clear, .btn-v3-sm.btn-v3-primary { + height: 30px; + line-height: 30px; + font-size: 13px; } + .btn-v3.btn-v3-md, .btn-v3-md.btn-v3-secondary, .btn-v3-md.btn-v3-clear, .btn-v3-md.btn-v3-primary { + height: 40px; + line-height: 40px; + font-size: 15px; } + .btn-v3.btn-v3-lg, .btn-v3-lg.btn-v3-secondary, .btn-v3-lg.btn-v3-clear, .btn-v3-lg.btn-v3-primary { + height: 50px; + line-height: 50px; + font-size: 20px; } + .btn-v3:hover, .btn-v3-secondary:hover, .btn-v3-clear:hover, .btn-v3-primary:hover { + background-image: linear-gradient(-180deg, #3996FF 0%, #127BF3 100%); } + .btn-v3:active, .btn-v3-secondary:active, .btn-v3-clear:active, .btn-v3-primary:active { + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.5); } + .btn-v3:focused, .btn-v3-secondary:focused, .btn-v3-clear:focused, .btn-v3-primary:focused { + border: 1px solid #0B71E6; + box-shadow: 0 0 2px 1px #59A7FF; } + +.btn-v3.disabled, .disabled.btn-v3-secondary, .disabled.btn-v3-clear, .disabled.btn-v3-primary { + opacity: 0.5; + background-image: none; + box-shadow: none; + border: none; + cursor: default; } + +.btn-v3-secondary { + background-color: #a3a3ad; } + .btn-v3-secondary:hover { + background-image: linear-gradient(-180deg, #A3A3AD 0%, #888894 100%); } + .btn-v3-secondary:active { + background: #888894; + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38); } + .btn-v3-secondary:focused { + border: 1px solid #888894; + box-shadow: 0 0 2px 1px #59A7FF; } + +.btn-v3-clear { + background-color: #FFFFFF; + border: 1px solid #C3C3C8; + color: #47474F; } + .btn-v3-clear:hover { + background-image: linear-gradient(0deg, #F5F5F5 0%, #FFFFFF 49%, #FFFFFF 100%); + border: 1px solid #A3A3AD; } + .btn-v3-clear:active { + background-image: linear-gradient(-180deg, #F5F5F5 0%, #FFFFFF 49%, #FFFFFF 100%); + border: 1px solid #A3A3AD; + box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); } + .btn-v3-clear:focused { + background: #FFFFFF; + border: 1px solid #59A7FF; + box-shadow: 0 0 2px 1px #CFE6FF; + border-radius: 4px; } + +.btn-v3-primary { + background-color: #FF5B52; } + .btn-v3-primary:hover { + background-image: linear-gradient(-180deg, #FF5B52 0%, #F22F24 100%); } + .btn-v3-primary:active { + background: #F22F24; + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38); } + .btn-v3-primary:focused { + border: 1px solid #F22F24; + box-shadow: 0 0 2px 1px #FFD4D1; } + +.viewport { + max-width: 1280px; + margin-left: auto; + margin-right: auto; } + .viewport.has-padding { + padding-left: 20px; + padding-right: 20px; } + +.main { + min-height: 480px; } + .main.bg-gray { + background-color: #EBEBEB; } + .main.has-spacing-t { + padding-top: 30px; } + +.main-card { + background: #FFFFFF; + box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06); + border-radius: 6px; } + +.challenge-tab-nav { + display: flex; + justify-content: center; + border-bottom: 1px solid #DCDCE0; + background-color: #FAFAFB; } + .challenge-tab-nav .nav-list { + display: flex; + background-color: #FAFAFB; } + .challenge-tab-nav .nav-list > li { + margin: 0 20px; } + .challenge-tab-nav .nav-list .nav-pill { + font-size: 13px; + height: 37px; + line-height: 36px; + color: #5D5D66; } + .challenge-tab-nav .nav-list .nav-pill a { + color: #5D5D66; + font-size: 13px; + line-height: 30px; + text-transform: uppercase; + transition: .3s; } + .challenge-tab-nav .nav-list .nav-pill a:hover { + color: #1A85FF; } + .challenge-tab-nav .nav-list .nav-pill.active { + border-bottom: 3px solid #1A85FF; } + .challenge-tab-nav .nav-list .nav-pill.active a { + color: #1A85FF; + font-weight: bold; } + +.challenge-article a { + color: #0B71E6; } + .challenge-article a:visited { + color: #0C4E98; } + .challenge-article a:hover { + text-decoration: underline; } + .challenge-article a:acitve { + color: #59A7FF; } + +.challenge-article li p { + display: inline-block; } + +.challenge-article .cd-wrapper { + background-color: #FFFFFF; } + +.challenge-content { + display: block; + margin-top: 55px; } + .challenge-content.has-aside-right { + display: flex; } + .challenge-content.has-aside-right .challenge-main-col { + flex: 1; } + .challenge-content.has-aside-right .challenge-sidebar-rt { + line-height: 1.6; + flex: 0 245px; } + +.challenge-main-col ul li { + list-style: none; + position: relative; + line-height: 1.6; } + .challenge-main-col ul li:before { + content: '●'; + vertical-align: top; + display: inline-block; + margin-right: 14px; + line-height: 1.5; } + +.challenge-main-col ol li { + list-style-type: decimal; + list-style-position: inside; + line-height: 1.6; } + +.challenge-main-col .spaced-section { + margin-bottom: 20px; } + +.challenge-main-col blockquote { + padding-left: 20px; + border-left: 3px solid #26ADE9; + line-height: 1.6; } + +.challenge-main-col h2 { + font-size: 20px; + color: #262628; + line-height: 1.8; + margin-bottom: 0.625rem; } + +.challenge-main-col h3 { + font-size: 15px; + color: #262628; + line-height: 1.8; + margin-bottom: 0.625rem; + font-size: 15px; + text-transform: uppercase; } + +.challenge-main-col h4 { + font-size: 15px; + color: #262628; + line-height: 1.8; + margin-bottom: 0.625rem; } + +.challenge-main-col p { + line-height: 1.67; + font-size: 15px; + margin-bottom: 1em; } + .challenge-main-col p:last-child { + margin-bottom: 0; } + +.challenge-main-col em { + font-style: italic; } + +.challenge-main-col ul { + list-style: disc; } + +.challenge-main-col .note { + background-color: #fff7cc; + padding: 15px 20px; + font-style: italic; + border: 1px solid #FAED8E; + border-radius: 6px; + line-height: 1.6; + margin-bottom: 1em; + font-size: 0.8125rem; + margin-bottom: 1.25rem; } + .challenge-main-col .note:last-child { + margin-bottom: 1.25rem; } + .challenge-main-col .note p { + margin-bottom: 1.25rem; } + .challenge-main-col .note p:last-child { + margin-bottom: 1.25rem; } + .challenge-main-col .note ul li:before { + margin-right: 4px; + line-height: 1.4; } + +.challenge-main-col code, .challenge-main-col pre { + background: #FAFAFB; + border: 1px solid #DCDCE0; + border-radius: 6px; + font-size: 13px; + line-height: 1.6em; + white-space: pre-wrap; + display: block; + padding: 15px 20px; } + +.challenge-pipline { + max-width: 740px; + margin: 0 auto; + padding: 0 20px; } + +.challenge-meta { + border-radius: 2px 0 0 2px; + background-color: #F4F9FF; + padding: 20px; + overflow: auto; + font-size: 13px; } + .challenge-meta h3 { + font-size: 13px; + margin-bottom: 0.3125rem; } + .challenge-meta .slide { + margin-bottom: 1.25rem; } + +.challenge-details { + min-height: 480px; } + .challenge-details h1 { + line-height: 1.4; + font-family: 'Roboto', arial, sans-serif; + font-weight: 500; + font-size: 28px; + color: #262628; } + .challenge-details h2 { + line-height: 1.2; + font-family: 'Roboto', arial, sans-serif; + font-weight: bold; + font-size: 20px; + color: #262628; } + .challenge-details h3 { + line-height: 1.2; + font-family: 'Roboto', arial, sans-serif; + font-weight: bold; + font-size: 15px; + text-transform: uppercase; + color: #262628; } + .challenge-details h4 { + line-height: 1.2; + font-family: 'Roboto', arial, sans-serif; + font-weight: bold; + font-size: 15px; + color: #37373C; } + +.challenge-details.has-padding { + padding-left: 20px; + padding-right: 20px; } + +.challenge-header { + display: block; + background-color: #FAFAFB; + border-radius: 6px 6px 0 0; + padding: 20px; + min-height: 200px; } + .challenge-header .header-lead { + background-color: #FAFAFB; } + .challenge-header .header-lead .tags { + margin-top: 10px; } + .challenge-header .tags { + display: flex; } + .challenge-header .tags .tag { + display: inline-block; + margin-right: 5px; + background-color: #EBEBEB; + color: #47474F; + line-height: 20px; + padding: 0 5px; + text-align: center; + font-weight: normal; + border-radius: 3px; + font-size: 11px; } + .challenge-header .tags .tag.tag-track { + background-color: #26ADE9; + color: #FFFFFF; } + .challenge-header .tags .tag.event { + background-color: #E9F6FC; + color: #26ADE9; + font-size: 10px; } + .challenge-header .status-bar { + background-color: #5D5D66; + min-height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 20px; + padding-right: 20px; + color: #DCDCE0; + border-radius: 0 0 6px 6px; } + .challenge-header .status-bar em { + font-style: normal; + color: #FFFFFF; + font-size: 15px; + line-height: 20px; } + .challenge-header .status-bar .gr { + line-height: 20px; + position: relative; + font-size: 15px; } + .challenge-header .status-bar .gr.challenge-status .seperator { + border-right: 1px solid #9d9da4; } + .challenge-header .status-bar .gr.challenge-status > span { + padding: 0 10px; } + .challenge-header .status-bar .gr.challenge-status > span:first-child { + padding-left: 0; } + .challenge-header .status-bar .gr small { + font-size: 13px; } + .challenge-header .status-bar .gr a { + color: #DCDCE0; } + .challenge-header .status-bar .gr a.toggle-vertical { + padding-right: 30px; + position: relative; } + .challenge-header .status-bar .gr a.toggle-vertical:after { + content: ''; + position: absolute; + right: 5px; + top: 2px; + width: 9px; + height: 9px; + border: solid #dadada; + border-width: 0 0 2px 2px; + transform: rotate(-45deg); + background-size: 17px; } + .challenge-header .status-bar-extended { + height: 0; + background-color: #4c4c54; + display: flex; + align-items: center; + border-radius: 0 0 6px 6px; + max-height: 0; + overflow: hidden; + opacity: 0; + transition: .3s; } + .challenge-header .status-bar-extended .status-meta { + padding: 0 20px; + position: relative; } + .challenge-header .status-bar-extended .status-meta:before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 40px; + background-color: #EDEDF2; + width: 1px; } + .challenge-header .status-bar-extended .status-meta:first-child:before { + display: none; } + .challenge-header .status-bar-extended .status-meta h6 { + font-size: 13px; + color: #A3A3AD; + line-height: 15px; } + .challenge-header .status-bar-extended .status-meta .v { + font-size: 20px; + color: #FFFFFF; + letter-spacing: -0.5px; + line-height: 25px; + margin-top: 5px; } + .challenge-header .status-bar-extended .status-meta .v.safe { + color: #60C700; } + .challenge-header.extended-header-open .status-bar { + border-radius: 0; } + .challenge-header.extended-header-open .status-bar .gr .toggle-vertical:after { + content: ''; + border-width: 2px 2px 0 0; + top: 6px; } + .challenge-header.extended-header-open .status-bar-extended { + height: 100px; + max-height: 1000px; + opacity: 1; } + +.challenge-prizes { + background-color: #FAFAFB; + border: 1px solid #DCDCE0; + margin-top: 20px; + background-color: #FFFFFF; + border-radius: 6px 6px 0 0; + position: relative; } + .challenge-prizes h5 { + color: #888894; + text-transform: uppercase; + font-size: 10px; + font-weight: bold; + letter-spacing: 1px; } + .challenge-prizes h5.abs-tl { + position: absolute; + left: 10px; + top: 0; } + .challenge-prizes .col-prizes { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; } + .challenge-prizes .col-prizes .prize-bar { + display: flex; + justify-content: center; + align-items: center; } + .challenge-prizes .col-prizes .prize-gr { + border-bottom: 3px solid #DCDCE0; + text-align: right; + margin: 0 25px; + display: inline-block; + min-width: 54px; } + .challenge-prizes .col-prizes .prize-gr h6 { + font-size: 13px; + color: #888894; + font-size: 13px; + font-weight: normal; } + .challenge-prizes .col-prizes .prize-gr h5 { + color: #47474F; + font-weight: 500; + font-size: 20px; + line-height: 30px; } + .challenge-prizes .col-prizes .prize-gr.gold { + border-bottom: 3px solid #FCE217; } + .challenge-prizes .col-prizes .prize-gr.silver { + border-bottom: 3px solid #96BFF3; } + .challenge-prizes .col-prizes .prize-gr.bronze { + border-bottom: 3px solid #BD731E; } + .challenge-prizes .col-prizes .bar-bonus { + text-transform: uppercase; + color: #a8a8ae; + border-radius: 0 0 6px 6px; + text-align: center; } + .challenge-prizes .col-prizes .bar-bonus a { + color: #26ADE9; + font-weight: 500; } + .challenge-prizes .gr-btns { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; } + .challenge-prizes .gr-btns .btn-v3, .challenge-prizes .gr-btns .btn-v3-secondary, .challenge-prizes .gr-btns .btn-v3-clear, .challenge-prizes .gr-btns .btn-v3-primary { + margin-top: 10px; } + .challenge-prizes .gr-btns .btn-v3:first-child, .challenge-prizes .gr-btns .btn-v3-secondary:first-child, .challenge-prizes .gr-btns .btn-v3-clear:first-child, .challenge-prizes .gr-btns .btn-v3-primary:first-child { + margin-top: 0; } + +.challenge-prizes { + background-color: #FFFFFF; + display: flex; + padding: 20px 10px; } + .challenge-prizes.flex .col-prizes { + flex: 1 945px; + padding: 0 10px; } + .challenge-prizes.flex .col-actions { + flex: 0 224px; + padding: 0 10px; } + +.addthis_toolbox.addthis_32x32_style .at-icon-wrapper { + border-radius: 50%; } + .addthis_toolbox.addthis_32x32_style .at-icon-wrapper svg { + width: 18px; + height: 18px; } + +.addthis_toolbox.addthis_32x32_style .addthis_default_style .at300b { + padding: 0 4px 0 3px; } diff --git a/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.ttf b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.ttf new file mode 100644 index 00000000..0b4e0ee1 Binary files /dev/null and b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.ttf differ diff --git a/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff new file mode 100644 index 00000000..532150fc Binary files /dev/null and b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff differ diff --git a/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff2 b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff2 new file mode 100644 index 00000000..df3c3f44 Binary files /dev/null and b/src/fonts/Roboto/BlackItalic/Roboto-BlackItalic.woff2 differ diff --git a/src/fonts/Roboto/Bold/Roboto-Bold.ttf b/src/fonts/Roboto/Bold/Roboto-Bold.ttf new file mode 100644 index 00000000..d3f01ad2 Binary files /dev/null and b/src/fonts/Roboto/Bold/Roboto-Bold.ttf differ diff --git a/src/fonts/Roboto/Bold/Roboto-Bold.woff b/src/fonts/Roboto/Bold/Roboto-Bold.woff new file mode 100644 index 00000000..83a333ad Binary files /dev/null and b/src/fonts/Roboto/Bold/Roboto-Bold.woff differ diff --git a/src/fonts/Roboto/Bold/Roboto-Bold.woff2 b/src/fonts/Roboto/Bold/Roboto-Bold.woff2 new file mode 100644 index 00000000..76817cc7 Binary files /dev/null and b/src/fonts/Roboto/Bold/Roboto-Bold.woff2 differ diff --git a/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.ttf b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.ttf new file mode 100644 index 00000000..41cc1e75 Binary files /dev/null and b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.ttf differ diff --git a/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff new file mode 100644 index 00000000..7f8c135d Binary files /dev/null and b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff differ diff --git a/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff2 b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff2 new file mode 100644 index 00000000..45c9ef73 Binary files /dev/null and b/src/fonts/Roboto/BoldItalic/Roboto-BoldItalic.woff2 differ diff --git a/src/fonts/Roboto/Italic/Roboto-Italic.ttf b/src/fonts/Roboto/Italic/Roboto-Italic.ttf new file mode 100644 index 00000000..6a1cee5b Binary files /dev/null and b/src/fonts/Roboto/Italic/Roboto-Italic.ttf differ diff --git a/src/fonts/Roboto/Italic/Roboto-Italic.woff b/src/fonts/Roboto/Italic/Roboto-Italic.woff new file mode 100644 index 00000000..6e4197d4 Binary files /dev/null and b/src/fonts/Roboto/Italic/Roboto-Italic.woff differ diff --git a/src/fonts/Roboto/Italic/Roboto-Italic.woff2 b/src/fonts/Roboto/Italic/Roboto-Italic.woff2 new file mode 100644 index 00000000..e7f173b7 Binary files /dev/null and b/src/fonts/Roboto/Italic/Roboto-Italic.woff2 differ diff --git a/src/fonts/Roboto/Medium/Roboto-Medium.ttf b/src/fonts/Roboto/Medium/Roboto-Medium.ttf new file mode 100644 index 00000000..1a7f3b0b Binary files /dev/null and b/src/fonts/Roboto/Medium/Roboto-Medium.ttf differ diff --git a/src/fonts/Roboto/Medium/Roboto-Medium.woff b/src/fonts/Roboto/Medium/Roboto-Medium.woff new file mode 100644 index 00000000..cbac5e5d Binary files /dev/null and b/src/fonts/Roboto/Medium/Roboto-Medium.woff differ diff --git a/src/fonts/Roboto/Medium/Roboto-Medium.woff2 b/src/fonts/Roboto/Medium/Roboto-Medium.woff2 new file mode 100644 index 00000000..6a88805f Binary files /dev/null and b/src/fonts/Roboto/Medium/Roboto-Medium.woff2 differ diff --git a/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.ttf b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.ttf new file mode 100644 index 00000000..00302952 Binary files /dev/null and b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.ttf differ diff --git a/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff new file mode 100644 index 00000000..3e635c1a Binary files /dev/null and b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff differ diff --git a/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff2 b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff2 new file mode 100644 index 00000000..cf21729c Binary files /dev/null and b/src/fonts/Roboto/MediumItalic/Roboto-MediumItalic.woff2 differ diff --git a/src/fonts/Roboto/Regular/Roboto-Regular.ttf b/src/fonts/Roboto/Regular/Roboto-Regular.ttf new file mode 100644 index 00000000..2c97eead Binary files /dev/null and b/src/fonts/Roboto/Regular/Roboto-Regular.ttf differ diff --git a/src/fonts/Roboto/Regular/Roboto-Regular.woff b/src/fonts/Roboto/Regular/Roboto-Regular.woff new file mode 100644 index 00000000..f43dd1b5 Binary files /dev/null and b/src/fonts/Roboto/Regular/Roboto-Regular.woff differ diff --git a/src/fonts/Roboto/Regular/Roboto-Regular.woff2 b/src/fonts/Roboto/Regular/Roboto-Regular.woff2 new file mode 100644 index 00000000..9a0064ec Binary files /dev/null and b/src/fonts/Roboto/Regular/Roboto-Regular.woff2 differ diff --git a/src/js/app/challenge-details/index.html b/src/js/app/challenge-details/index.html index 1ac0e429..0dd4d4d7 100644 --- a/src/js/app/challenge-details/index.html +++ b/src/js/app/challenge-details/index.html @@ -1,902 +1,708 @@ @@header - - -
-
-
-
-
-
-
-
- -
-
- - {{$index + 1}} - {{button.text}} - +
+
+
+
+ +
+
+
Prizes
+
+
+
1st
+
$
-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
-

- $ -

- -

1st PLACE

- 		-

- $ -

- -

2nd PLACE

- 		-

- $ -

- -

1st PLACE

- 		-

- $ -

- -

2nd PLACE

- 		-

- $ -

- -

3rd PLACE

- 		-

- $ -

- -

4th PLACE

- 		-

- $ -

- -

5th PLACE

- 		- -
-

-

$

-
-

- Reliability Bonus - - - - N/A - -

- 		-

CHECKPOINT AWARDS WORTH - EACH

-

NO CHECKPOINT AWARDS

-
- -
-
    -
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -

    1st PLACE

    - -

    - $ -

    -     		-

    2nd PLACE

    -

    - $ -

    -     		-

    1st PLACE

    - -

    - $ -

    -     		-

    1st PLACE

    - -

    - $0 -

    -     		-

    2nd PLACE

    - -

    - $ -

    -     		-

    2nd PLACE

    - -

    - $0 -

    -     		-

    3rd PLACE

    - -

    - $ -

    -     		-

    3rd PLACE

    - -

    - $0 -

    -     		-

    4th PLACE

    - -

    - $ -

    -     		-

    4th PLACE

    - -

    - $ -

    -     		-

    5th PLACE

    - -

    - $ -

    -     		-

    5th PLACE

    - -

    - $0 -

    -     		- -
    -

    -

    $

    -
    -

    - Reliability Bonus - - {{CD.challenge.reliabilityBonus}} - - - N/A - -

    -     		-

    CHECKPOINT AWARDS WORTH $ - EACH

    -
    -
    • -
- -
- -
-
- -
- -
-
- Current Phase - - -
- - - - - - - - - +
+
2nd
+
$
- -
-

- - {{CD.challenge.postingDate | formatDate:2}} - -

-

- - {{CD.challenge.registrationEndDate | formatDate:2}} - -

-

- - {{CD.challenge.submissionEndDate | formatDate:2}} - -

-

- - - {{CD.challenge.currentPhaseEndDate | formatDate:2}} - -

- -

- - {{CD.challenge.finalFixEndDate | formatDate:2}} - -

- +
+
1st
+
$
- -
-

- - {{CD.challenge.postingDate | formatDate:2}} - -

-

- - {{CD.challenge.checkpointSubmissionEndDate | formatDate:2}} - -

- -

- - {{CD.challenge.submissionEndDate | formatDate:2}} - -

- -

- - {{CD.challenge.appealsEndDate | formatDate:2}} - -

+
+
2nd
+
$
- -
- - -
- -
- View all deadlines + +
+
3rd
+
$
+
+
+
4th
+
$
+
+
+
5th
+
$
- -
- View next deadline + +
+
4th
+
$
+
+
+
{i+1}th
+
$
-
- -
+ +
+ BONUS: Checkpoint Awards worth each +
+
+ Reliability Bonus: + +
+
-
-
-
- -
- - - - -
-
-

Challenge Overview

- -

- -
-

Platforms

-
-
    -
  • - {{platform}} -
    • -
  • - Not Specified -
    • -
-
-
-
- -
-

Technologies

-
-
    -
  • - {{tech}} -
    • -
  • - Not Specified -
    • - -
-
-
-
- -

Final Submission Guidelines

-
- -
-

Payments

- -

Topcoder will compensate members in accordance with the payment structure of this challenge. - Initial payment for the winning member will be distributed in two installments. The first payment - will be made at the closure of the approval phase. The second payment will be made at the - completion of the support period.

- -

Reliability Rating and Bonus

- -

For challenges that have a reliability bonus, the bonus depends on the reliability rating at - the moment of registration for that project. A participant with no previous projects is - considered to have no reliability rating, and therefore gets no bonus. - Reliability bonus does not apply to Digital Run winnings. Since reliability rating is - based on the past 15 projects, it can only have 15 discrete values.
- Read more.

-
- -
-
-
-
- -
-

CHALLENGE SUMMARY

- -

- -

- -

Please read the challenge specification carefully and watch the forums for any - questions or feedback concerning this challenge. It is important that you monitor any updates - provided by the client or Studio Admins in the forums. Please post any questions you might have for - the client in the forums. -

-
- -
-

CHALLENGE FORMAT

-

This competition will be run as a two-round challenge.

-
- Round One (1) - -

- -

- - Round Two (2) - -

- -

- -

- - -
Regarding the Rounds:
- -

- -
    -
  • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint - deadline. -
    • -
  • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and - provide design feedback to those winners in the "Checkpoints" tab above. -
    • -
  • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails - screening for a small mistake in Round 1, you may still be eligible to submit to Round 2. -
    • -
  • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't - win a Checkpoint prize. -
    • -
  • Learn - more here. -
    • -
-
-
- -
-

FULL DESCRIPTION & PROJECT GUIDE

- -

-
- - - -
-

HOW TO SUBMIT

- -

-

    -
  • New to Studio? Learn how to compete - here. -
    • -
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design - concept (do not include multiple designs in a single submission). -
    • -
  • If your submission wins, your source files must be correct and - "Final Fixes" (if - applicable) must be completed before payment can be released. -
    • -
  • You may submit as many times as you'd like during the submission phase, but only the number of files - listed above in the Submission Limit that you rank the highest will be considered. You can change - the order of your submissions at any time during the submission phase. If you make revisions to your - design, please delete submissions you are replacing. -
    • -
-

-
- -
-

WINNER SELECTION

- -

- Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the - client and are chosen solely at the Client's discretion. -

-
- -
-

PAYMENTS

- -

Topcoder will compensate members in accordance with the payment structure of this challenge. - Initial payment for the winning member will be distributed in two installments. The first payment - will be made at the closure of the approval phase. The second payment will be made at the - completion of the support period.

- -

Reliability Rating and Bonus

- -

For challenges that have a reliability bonus, the bonus depends on the reliability rating at - the moment of registration for that project. A participant with no previous projects is - considered to have no reliability rating, and therefore gets no bonus. - Reliability bonus does not apply to Digital Run winnings. Since reliability rating is - based on the past 15 projects, it can only have 15 discrete values.
- Read more.

-
- - -
+
+ +
+
+ + Next Deadline: + d + + h m + until current deadline ends
+
View All Deadlines
+
+ +
+
+
Start Date
+
{{CD.challenge.postingDate | formatDate:2}}
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - -
-
Username
- 		-
Rating
- 		-
Reliability
- 		-
Registration Date
- 		-
Submission Date
- 		-
Result
-
- - - - - - - - - -
- - -
- - +
+
Register By
+
{{CD.challenge.registrationEndDate | formatDate:2}}
-
-
+
+
Submit By
+
{{CD.challenge.submissionEndDate | formatDate:2}}
-
- - -
-
-
- +
+
Review By
+
{{CD.challenge.currentPhaseEndDate | formatDate:2}}
-
- - -
-
-
- +
+
Final Submission
+
{{CD.challenge.finalFixEndDate | formatDate:2}}
-
+
+
Winners
+
{{CD.challenge.appealsEndDate | formatDate:2}}
- +
+ +
+
+
Start Date
+
{{CD.challenge.postingDate | formatDate:2}}
+
+
+
Checkpoint
+
{{CD.challenge.checkpointSubmissionEndDate | formatDate:2}}
+
+
+
End Date
+
{{CD.challenge.submissionEndDate | formatDate:2}}
+
+
+
Winners Announced
+
{{CD.challenge.appealsEndDate | formatDate:2}}
- -
- -
- - - -
-
- -
- - - - - - - -@@footer +@@footer \ No newline at end of file diff --git a/src/js/app/challenge-details/js/controllers/challenge-details-controller.js b/src/js/app/challenge-details/js/controllers/challenge-details-controller.js index 2ed9c322..8d889cac 100644 --- a/src/js/app/challenge-details/js/controllers/challenge-details-controller.js +++ b/src/js/app/challenge-details/js/controllers/challenge-details-controller.js @@ -576,25 +576,25 @@ if (vm.isDesign) { if (vm.challenge.allowToUnregister) { vm.buttons.push(newButton({ - classes: 'challengeRegisterBtn unregister', + classes: 'challengeRegisterBtn unregister btn-v3-primary', onClick: vm.unregisterFromChallenge, - text: 'Unregister From This Challenge' + text: 'Unregister' })); } else { vm.buttons.push(newButton({ classes: 'challengeRegisterBtn ' + (vm.challenge.registrationDisabled ? 'disabled ' : 'disabledNOT'), onClick: vm.registerToChallenge, - text: 'Register For This Challenge' + text: 'Register' })); } vm.buttons.push(newButton({ href: '/challenges/' + vm.challenge.challengeId + '/submit/file', classes: (vm.challenge.submissionDisabled ? 'disabled ' : 'disabledNOT'), - text: 'Submit Your Entries' + text: 'Submit' })); vm.buttons.push(newButton({ href: '//studio.' + vm.domain + '/?module=ViewSubmission&ct=' + vm.challenge.challengeId, - text: 'View Your Submission', + text: 'View Submissions', classes: (vm.challenge.submissionDisabled ? 'disabled ' : 'disabledNOT'), })) } else { @@ -613,27 +613,27 @@ } else { if (vm.challenge.allowToUnregister) { vm.buttons.push(newButton({ - classes: 'challengeRegisterBtn unregister', + classes: 'challengeRegisterBtn unregister btn-v3-primary', onClick: vm.unregisterFromChallenge, - text: 'Unregister From This Challenge' + text: 'Unregister' })); } else { vm.buttons.push(newButton({ classes: 'challengeRegisterBtn ' + (vm.challenge.registrationDisabled ? 'disabled ' : 'disabledNOT'), onClick: vm.registerToChallenge, - text: 'Register For This Challenge' + text: 'Register' })); } vm.buttons.push(newButton({ href: '/challenge-details/' + vm.challenge.challengeId + '/submit/?type=develop', classes: (vm.challenge.submissionDisabled ? 'disabled ' : 'disabledNOT'), - text: 'Submit Your Entries' + text: 'Submit' })); if (!vm.challenge.peerReviewDisabled) { vm.buttons.push(newButton({ href: '/challenges/' + vm.challenge.challengeId + '/reviews/', classes: (vm.challenge.peerReviewDisabled ? 'disabled ' : 'disabledNOT'), - text: 'Review This Challenge' + text: 'Review' })); } } diff --git a/src/js/app/challenge-details/js/directives/submission-directives.js b/src/js/app/challenge-details/js/directives/submission-directives.js index b420c17c..7e20f22c 100644 --- a/src/js/app/challenge-details/js/directives/submission-directives.js +++ b/src/js/app/challenge-details/js/directives/submission-directives.js @@ -53,6 +53,25 @@ }); } } + }) + + /** + * The directive toggles the extended header section + * containing challenge details + */ + + .directive('headerExtendedToggler', function (ImageService) { + return { + restrict: 'A', + link: function(scope, element, attr){ + $(element).on('click',function(){ + var header = $(element).closest('.challenge-header'); + header.hasClass('extended-header-open') + ?header.removeClass('extended-header-open') + :header.addClass('extended-header-open'); + }) + } + } }); /** diff --git a/src/js/app/challenge-details/partials/ng-content-basic-challenge-details.tpl.html b/src/js/app/challenge-details/partials/ng-content-basic-challenge-details.tpl.html index 93b6ebb7..43558f16 100644 --- a/src/js/app/challenge-details/partials/ng-content-basic-challenge-details.tpl.html +++ b/src/js/app/challenge-details/partials/ng-content-basic-challenge-details.tpl.html @@ -1,6 +1,12 @@ +
+

-
-

- -

-
+
+ + {{CD.challenge.event.shortDescription | uppercase}} + {{platform}} + + {{tech}} + +
+
diff --git a/src/scss/_challenge-details.scss b/src/scss/_challenge-details.scss new file mode 100644 index 00000000..cb523ba9 --- /dev/null +++ b/src/scss/_challenge-details.scss @@ -0,0 +1,309 @@ +// challenge-details +.challenge-details { + min-height: 480px; + h1 { + line-height: 1.4; + @include fontH1; + color: $tc-black; + } + h2 { + line-height: 1.2; + @include fontH2; + color: $tc-black; + } + h3 { + line-height: 1.2; + @include fontH3; + color: $tc-black; + } + h4 { + line-height: 1.2; + @include fontH4; + color: #37373C; + } +} + +.challenge-details.has-padding{ + padding-left: $gutter; + padding-right: $gutter; +} + +// challenge-header +.challenge-header { + display: block; + background-color: $tc-gray-neutral-light; + border-radius: 6px 6px 0 0; + padding: $gutter; + min-height: 200px; + + .header-lead { + background-color: $tc-gray-neutral-light; + .tags { + margin-top: $gutter/2; + } + } + .tags { + display: flex; + .tag { + display: inline-block; + margin-right: 5px; + background-color: $tc-gray-neutral-dark; + color: $tc-gray-80; + line-height: 20px; + padding: 0 5px; + text-align: center; + font-weight: normal; + border-radius: 3px; + font-size: 11px; + + &.tag-track { + background-color: $tc-light_blue; + color: $tc-white + } + &.event { + background-color: $tc-light_blue-10; + color: $tc-light_blue; + font-size: 10px; + } + } + } // status-bar + .status-bar { + background-color: $tc-gray-70; + min-height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: $gutter; + padding-right: $gutter; + color: #DCDCE0; + border-radius: 0 0 6px 6px; + em { + font-style: normal; + color: $tc-white; + font-size: 15px; + line-height: 20px; + } + .gr { + line-height: 20px; + position: relative; + font-size: 15px; + &.challenge-status { + .seperator { + border-right: 1px solid #9d9da4; + } + >span { + padding: 0 10px; + &:first-child { + padding-left: 0; + } + } + } + small { + font-size: 13px; + } + a { + color: $tc-gray-20; + &.toggle-vertical { + padding-right: 30px; + position: relative; + &:after { + content: ''; + position: absolute; + right: 5px; + top: 2px; + width: 9px; + height: 9px; + border: solid #dadada; + border-width: 0 0 2px 2px; + transform: rotate(-45deg); + background-size: 17px; + } + } + } + } + } + // status-bar-extended + .status-bar-extended { + height: 0; + background-color: #4c4c54; + display: flex; + align-items: center; + border-radius: 0 0 6px 6px; + max-height: 0; + overflow: hidden; + opacity: 0; + @include ease; + + .status-meta { + padding: 0 $gutter; + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 40px; + background-color: $tc-gray-10; + width: 1px; + } + &:first-child { + &:before { + display: none; + } + } + h6 { + font-size: 13px; + color: #A3A3AD; + line-height: 15px; + } + .v { + font-size: $gutter; + color: $tc-white; + letter-spacing: -0.5px; + line-height: 25px; + margin-top: 5px; + + &.safe { + color: $tc-green; + } + } + } + } + &.extended-header-open { + .status-bar { + border-radius: 0; + .gr { + .toggle-vertical { + &:after { + content: ''; + border-width: 2px 2px 0 0; + top: 6px; + } + } + } + } + .status-bar-extended { + height: 100px; + max-height: 1000px; + opacity: 1; + } + } +} + + +// challenge-prizes +.challenge-prizes { + background-color: $tc-gray-neutral-light; + border: 1px solid $tc-gray-20; + margin-top: $gutter; + background-color: $tc-white; + border-radius: 6px 6px 0 0; + position: relative; + + h5 { + color: $tc-gray-50; + text-transform: uppercase; + font-size: 10px; + font-weight: bold; + letter-spacing: 1px; + + &.abs-tl { + position: absolute; + left: 10px; + top: 0; + } + } + .col-prizes { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; + + .prize-bar { + display: flex; + justify-content: center; + align-items: center; + } + .prize-gr { + border-bottom: 3px solid $tc-gray-20; + text-align: right; + margin: 0 25px; + display: inline-block; + min-width: 54px; + h6 { + font-size: 13px; + color: $tc-gray-50; + font-size: 13px; + font-weight: normal; + } + h5 { + color: $tc-gray-80; + font-weight: 500; + font-size: 20px; + line-height: 30px; + } + &.gold { + border-bottom: 3px solid $tc-gold; + } + &.silver { + border-bottom: 3px solid #96BFF3; + } + &.bronze { + border-bottom: 3px solid $tc-bronze; + } + } + .bar-bonus { + text-transform: uppercase; + color: #a8a8ae; + border-radius: 0 0 6px 6px; + text-align: center; + a { + color: $tc-light_blue; + font-weight: 500; + } + } + } //gr-btns + .gr-btns { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + .btn-v3 { + margin-top: $gutter/2; + &:first-child { + margin-top: 0; + } + } + } +} + +// challenge-prizes +.challenge-prizes { + background-color: $tc-white; + display: flex; + padding: 20px 10px; + &.flex { + .col-prizes { + flex: 1 945px; + padding: 0 $gutter/2; + } + .col-actions { + flex: 0 224px; + padding: 0 $gutter/2; + } + } +} + +//share icons +.addthis_toolbox.addthis_32x32_style { + .at-icon-wrapper{ + border-radius: 50%; + svg{ + width: 18px; + height: 18px; + } + } + .addthis_default_style .at300b{ + padding: 0 4px 0 3px; + } +} \ No newline at end of file diff --git a/src/scss/_font.scss b/src/scss/_font.scss new file mode 100644 index 00000000..5f0be187 --- /dev/null +++ b/src/scss/_font.scss @@ -0,0 +1,71 @@ +/* BEGIN Bold */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Bold"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Bold"); + font-weight: bold; + font-style: normal; +} +/* BEGIN Bold Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "BoldItalic"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "BoldItalic"); + font-weight: bold; + font-style: italic; +} + +/* BEGIN Medium */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Medium"); + font-weight: 500; + font-style: normal; +} +/* BEGIN Medium Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "MediumItalic"); + font-weight: 500; + font-style: italic; +} + +/* BEGIN Regular */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Regular"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Regular"); + font-weight: normal; + font-style: normal; +} +/* BEGIN Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Italic"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Italic"); + font-weight: normal; + font-style: italic; +} +/* END Italic */ + + diff --git a/src/scss/_normalize.scss b/src/scss/_normalize.scss new file mode 100644 index 00000000..c001876e --- /dev/null +++ b/src/scss/_normalize.scss @@ -0,0 +1,207 @@ +/* normalize css */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video, +input, +textarea, +main { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +main, +nav, +section { + display: block; +} +body { + background: #fff; + @include fontDefault; + line-height: 1.2; + font-size: 16px; +} +a, +a:hover, +a:active, +a:focus { + text-decoration: none; + cursor: pointer; + outline: none; +} +a:visited, +a:focus { + outline: none; +} + +ol, +ul, +li { + list-style: none; +} +blockquote, +q { + quotes: none; +} +i,em{ + font-style: italic; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +h1,h2,h3,h4,h5,h6{ + margin: 0; + padding: 0; + font-weight: normal; + @include fontDefault; +} +table { + border-spacing: 0; + border-collapse: collapse; +} +strong { + font-weight: 700; +} +input, +textarea { + @include fontDefault; + outline: none; + box-shadow: none; +} +input::-webkit-input-placeholder { + color: #aaa; +} +input::-moz-input-placeholder { + color: #aaa; +} +input:-ms-input-placeholder, +input:-ms-input-placeholder { + color: #aaa; +} + +textarea::-webkit-input-placeholder { + color: #aaa; +} +textarea::-moz-input-placeholder { + color: #aaa; +} +textarea:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #aaa; +} +textarea{ + overflow: auto; +} +svg:not(:root) { + overflow: hidden; +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} +input[type="search"]::-ms-clear { + display: none; +} +input::-ms-clear { + display: none; +} +button{ + outline: none; +} \ No newline at end of file diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss new file mode 100644 index 00000000..3aceca9b --- /dev/null +++ b/src/scss/components/_buttons.scss @@ -0,0 +1,132 @@ +// buttons +.btn-v3 { + display: block; + text-align: center; + height: 40px; + line-height: 40px; + background-color: $tc-dark-blue-90; + color: $tc-gray-neutral-light; + font-size: 15px; + font-weight: 500; + border-radius: 4px; + text-align: center; + font-weight: 500; + cursor: pointer; + border: none; + margin: 0; + padding-right: 6px; + padding-left: 6px; + @include ease; + + &.inline{ + white-space: no-wrap; + text-overflow: ellipsis; + overflow: hidden; + } + &.btn-v3-xs { + height: 20px; + line-height: 20px; + font-size: 12px; + } + &.btn-v3-sm { + height: 30px; + line-height: 30px; + font-size: 13px; + } + &.btn-v3-md { + height: 40px; + line-height: 40px; + font-size: 15px; + } + &.btn-v3-lg { + height: 50px; + line-height: 50px; + font-size: 20px; + } + + &:hover { + background-image: linear-gradient(-180deg, #3996FF 0%, #127BF3 100%); + } + &:active { + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.50); + } + &:focused { + border: 1px solid $tc-dark-blue; + box-shadow: 0 0 2px 1px $tc-accent; + } +} + +//disabled +.btn-v3{ + &.disabled { + opacity: 0.5; + background-image: none; + box-shadow: none; + border: none; + cursor: default; + } +} + + +//secondary button +.btn-v3-secondary { + @extend .btn-v3; + background-color: #a3a3ad; + + &:hover { + background-image: linear-gradient(-180deg, #A3A3AD 0%, $tc-gray-50 100%); + } + &:active { + background: $tc-gray-50; + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38); + } + &:focused { + border: 1px solid $tc-gray-50; + box-shadow: 0 0 2px 1px $tc-accent; + } +} + + +//clear button +.btn-v3-clear { + @extend .btn-v3; + background-color: $tc-white; + border: 1px solid $tc-gray-30; + color: $tc-gray-80; + + + &:hover { + background-image: linear-gradient(0deg, #F5F5F5 0%, $tc-white 49%, $tc-white 100%); + border: 1px solid #A3A3AD; + } + &:active { + background-image: linear-gradient(-180deg, #F5F5F5 0%, $tc-white 49%, $tc-white 100%); + border: 1px solid #A3A3AD; + box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.20); + } + &:focused { + background: $tc-white; + border: 1px solid $tc-accent; + box-shadow: 0 0 2px 1px $tc-dark-blue-30; + border-radius: 4px; + } +} + + +//primary button +.btn-v3-primary { + @extend .btn-v3; + background-color: $tc-red-70; + + &:hover { + background-image: linear-gradient(-180deg, $tc-red-70 0%, #F22F24 100%); + } + &:active { + background: #F22F24; + box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38); + } + &:focused { + border: 1px solid #F22F24; + box-shadow: 0 0 2px 1px #FFD4D1; + } +} \ No newline at end of file diff --git a/src/scss/global/_tc-colors.scss b/src/scss/global/_tc-colors.scss new file mode 100644 index 00000000..3f266bcb --- /dev/null +++ b/src/scss/global/_tc-colors.scss @@ -0,0 +1,32 @@ +// Topcoder colour palette +$tc-white: #FFFFFF; +$tc-black: #262628; +$tc-light_blue: #26ADE9; +$tc-light_blue-10: #E9F6FC; +$tc-orange: #FB7D22; +$tc-orange-10: #FFF0EB; +$tc-red-70: #FF5B52; +$tc-green: #60C700; +$tc-green-10: #EFFAE5; +$tc-gray-neutral-dark: #EBEBEB; +$tc-gray-neutral-light: #FAFAFB; +$tc-gold: #FCE217; +$tc-silver: #A9BCD4; +$tc-bronze: #BD731E; +$tc-purple: #B47DD6; +$tc-accent: #59A7FF; +$tc-gray-10: #EDEDF2; +$tc-gray-20: #DCDCE0; +$tc-gray-30: #C3C3C8; +$tc-gray-50: #888894; +$tc-gray-60: #747480; +$tc-gray-70: #5D5D66; +$tc-gray-80: #47474F; +$tc-gray-90: #394146; +$tc-dark-blue: #0B71E6; +$tc-dark-blue-10: #F4F9FF; +$tc-dark-blue-30: #CFE6FF; +$tc-dark-blue-90: #1A85FF; +$prize-color: #202A36; +$tc-level-4: #FCB816; +$tc-level-5: #E6175C; diff --git a/src/scss/main-v3.scss b/src/scss/main-v3.scss new file mode 100644 index 00000000..f3fa0549 --- /dev/null +++ b/src/scss/main-v3.scss @@ -0,0 +1,16 @@ +/** + * © 2017 Topcoder + * + * v3.0.0: hi4sandy + */ + +@import './tc-theme/mixins'; +@import './tc-theme/variables'; +@import './global/tc-colors'; + +@import './tc-theme/font'; +@import './normalize'; +@import './components/buttons'; + +@import './tc-theme/layout'; +@import './challenge-details'; diff --git a/src/scss/tc-theme/_font.scss b/src/scss/tc-theme/_font.scss new file mode 100644 index 00000000..5f0be187 --- /dev/null +++ b/src/scss/tc-theme/_font.scss @@ -0,0 +1,71 @@ +/* BEGIN Bold */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Bold"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Bold"); + font-weight: bold; + font-style: normal; +} +/* BEGIN Bold Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "BoldItalic"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "BoldItalic"); + font-weight: bold; + font-style: italic; +} + +/* BEGIN Medium */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Medium"); + font-weight: 500; + font-style: normal; +} +/* BEGIN Medium Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "MediumItalic"); + font-weight: 500; + font-style: italic; +} + +/* BEGIN Regular */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Regular"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Regular"); + font-weight: normal; + font-style: normal; +} +/* BEGIN Italic */ +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Italic"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: Roboto; + @include fontdef-woff($FontPath, $FontName, $FontVersion, "Italic"); + font-weight: normal; + font-style: italic; +} +/* END Italic */ + + diff --git a/src/scss/tc-theme/_layout.scss b/src/scss/tc-theme/_layout.scss new file mode 100644 index 00000000..c80b5b4f --- /dev/null +++ b/src/scss/tc-theme/_layout.scss @@ -0,0 +1,247 @@ +// layout +.viewport { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + &.has-padding { + padding-left: $gutter; + padding-right: $gutter; + } +} + + +.main { + min-height: 480px; + &.bg-gray { + background-color: $tc-gray-neutral-dark; + } + &.has-spacing-t { + padding-top: 30px; + } +} + +// main-card +.main-card { + background: $tc-white; + box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06); + border-radius: 6px; +} + +// challenge-tab-nav +.challenge-tab-nav { + display: flex; + justify-content: center; + border-bottom: 1px solid $tc-gray-20; + background-color: $tc-gray-neutral-light; + + .nav-list { + display: flex; + background-color: $tc-gray-neutral-light; + >li { + margin: 0 20px; + } + .nav-pill { + font-size: 13px; + height: 37px; + line-height: 36px; + color: $tc-gray-70; + a { + color: $tc-gray-70; + font-size: 13px; + line-height: 30px; + text-transform: uppercase; + @include ease; + + &:hover { + color: $tc-dark-blue-90; + } + } + + &.active { + border-bottom: 3px solid $tc-dark-blue-90; + a { + color: $tc-dark-blue-90; + font-weight: bold; + } + } + } + } +} + +// challenge-article +.challenge-article { + a { + color: $tc-dark-blue; + &:visited { + color: #0C4E98; + } + &:hover { + text-decoration: underline; + } + &:acitve { + color: $tc-accent; + } + } + li { + p { + display: inline-block; + } + } + .cd-wrapper { + background-color: $tc-white; + } +} + +// challenge-content +.challenge-content { + display: block; + margin-top: $gutter*2.75; + + &.has-aside-right { + display: flex; + .challenge-main-col { + flex: 1; + } + .challenge-sidebar-rt { + line-height: 1.6; + flex: 0 245px; + } + } +} + +//challenge-main-col +.challenge-main-col { + ul { + li { + list-style: none; + position: relative; + line-height: 1.6; + + &:before { + content: '●'; + vertical-align: top; + display: inline-block; + margin-right: 14px; + line-height: 1.5; + } + } + } + ol { + li { + list-style-type: decimal; + list-style-position: inside; + line-height: 1.6; + } + } + .spaced-section { + margin-bottom: $gutter; + } + blockquote { + padding-left: $gutter; + border-left: 3px solid $tc-light_blue; + line-height: 1.6; + } + h2 { + font-size: 20px; + color: $tc-black; + line-height: 1.8; + margin-bottom: 0.625rem; + } + h3 { + font-size: 15px; + color: $tc-black; + line-height: 1.8; + margin-bottom: 0.625rem; + font-size: 15px; + text-transform: uppercase; + } + h4 { + font-size: 15px; + color: $tc-black; + line-height: 1.8; + margin-bottom: 0.625rem; + } + p { + line-height: 1.67; + font-size: 15px; + margin-bottom: 1em; + &:last-child { + margin-bottom: 0; + } + } + em { + font-style: italic; + } + ul { + list-style: disc; + } + + // note + .note { + background-color: #fff7cc; + padding: $gutter*0.75 $gutter; + font-style: italic; + border: 1px solid #FAED8E; + border-radius: 6px; + line-height: 1.6; + margin-bottom: 1em; + font-size: 0.8125rem; + margin-bottom: 1.25rem; + &:last-child { + margin-bottom: 1.25rem; + } + + p { + margin-bottom: 1.25rem; + &:last-child { + margin-bottom: 1.25rem; + } + } + ul { + li { + &:before{ + margin-right: 4px; + line-height: 1.4; + } + } + } + } + code { + background: $tc-gray-neutral-light; + border: 1px solid $tc-gray-20; + border-radius: 6px; + font-size: 13px; + line-height: 1.6em; + white-space: pre-wrap; + display: block; + padding: 15px 20px; + } + pre { + @extend code; + } +} + +// challenge-pipline +.challenge-pipline { + max-width: 720px + $gutter; + margin: 0 auto; + padding: 0 $gutter; +} + + +// challenge-meta +.challenge-meta { + border-radius: 2px 0 0 2px; + background-color: $tc-dark-blue-10; + padding: $gutter; + overflow: auto; + font-size: 13px; + + h3 { + font-size: 13px; + margin-bottom: 0.3125rem; + } + .slide { + margin-bottom: 1.25rem; + } +} \ No newline at end of file diff --git a/src/scss/tc-theme/_mixins.scss b/src/scss/tc-theme/_mixins.scss new file mode 100644 index 00000000..742311e5 --- /dev/null +++ b/src/scss/tc-theme/_mixins.scss @@ -0,0 +1,39 @@ +// mixins + +// fonts +@mixin fontdef-woff($FontPath, $FontName, $FontVersion:"1.0.0", $FontType:"Regular") { + src: url('#{$FontPath}/#{$FontType}/#{$FontName}-#{$FontType}.woff2?v=#{$FontVersion}') format('woff2'), + url('#{$FontPath}/#{$FontType}/#{$FontName}-#{$FontType}.woff?v=#{$FontVersion}') format('woff'); +} + + +// transition +@mixin ease{ + transition: .3s; +} +// font +@mixin fontDefault{ + font-family: 'Roboto', arial, sans-serif; +} +@mixin fontH1 { + @include fontDefault; + font-weight: 500; + font-size: 28px; +} +@mixin fontH2 { + @include fontDefault; + font-weight: bold; + font-size: 20px; +} +@mixin fontH3 { + @include fontDefault; + font-weight: bold; + font-size: 15px; + text-transform: uppercase +} + +@mixin fontH4{ + @include fontDefault; + font-weight: bold; + font-size: 15px; +} \ No newline at end of file diff --git a/src/scss/tc-theme/_variables.scss b/src/scss/tc-theme/_variables.scss new file mode 100644 index 00000000..4bc2ecc9 --- /dev/null +++ b/src/scss/tc-theme/_variables.scss @@ -0,0 +1,8 @@ +//variables +//font +$FontPath: "../fonts/Roboto" !default; +$FontName: "Roboto" !default; +$FontVersion: "2.137" !default; + +//spacings +$gutter: 20px; \ No newline at end of file diff --git a/wp/wp-content/themes/tcs-responsive/config/script-register.json b/wp/wp-content/themes/tcs-responsive/config/script-register.json index 3920b722..106785bc 100755 --- a/wp/wp-content/themes/tcs-responsive/config/script-register.json +++ b/wp/wp-content/themes/tcs-responsive/config/script-register.json @@ -293,6 +293,7 @@ "challenge-submit.css", "password-recovery.css", "challenge-tags.css", + "main-v3.css", "../js/app/member-profile/js/lib/loading-bar/loading-bar.css" ] }, @@ -422,6 +423,7 @@ "challenge-submit.css", "password-recovery.css", "challenge-tags.css", + "main-v3.css", "../js/app/users/js/lib/loading-bar/loading-bar.css" ] }, @@ -478,11 +480,11 @@ "community-landing.css", "challenge-detail-software.css", "challenge-results.css", - "jqtransform.css", "challenge-submit.css", "password-recovery.css", "challenge-tags.css", "style-404page.css", + "main-v3.css", "../js/app/challenge-details/js/lib/loading-bar/loading-bar.css" ] },