diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 0c0065acf1..6d10031ef5 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -61,6 +61,10 @@ module.exports = { 'app.footer.version': 'Version: ', 'app.footer.author': 'Created by AFX', 'app.footer.work_with_us': 'Work with Us', + 'app.footer.more-product': 'More Products', + 'app.footer.privacy': 'Privacy Policy', + 'app.footer.commitment': 'Our Commitment to Customer Protection', + 'app.footer.company': 'Ant Financial', 'app.publish.title': 'antd@2.0.0 is released!', 'app.publish.greeting': 'Hello, ', 'app.publish.intro': ' is released, and please upgrade. ', diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less index f358e05469..82d15e8ce4 100644 --- a/site/theme/static/colors.less +++ b/site/theme/static/colors.less @@ -98,6 +98,8 @@ @grey-9: rgba(0, 0, 0, 85%); @grey-10: rgba(0, 0, 0, 100%); +@border-color: rgba(229, 231, 235, 100); + .main-color { .make-palatte(blue); .make-palatte(purple); diff --git a/site/theme/static/common.less b/site/theme/static/common.less index a95ea89884..50085c39c6 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -23,24 +23,18 @@ a { .main-wrapper { background: #fff; - margin: 0 48px; - border-radius: @border-radius-base; - padding: 24px 0 0; - margin-bottom: 24px; + padding: 40px 0 0; position: relative; } .main-container { - padding: 0 40px 120px; + padding: 0 194px 144px 64px; margin-left: -1px; background: #fff; min-height: 500px; overflow: hidden; border-left: 1px solid #e9e9e9; position: relative; - &-component { - padding-right: 130px; - } } .aside-container { @@ -55,6 +49,10 @@ a { overflow: hidden; } + &.ant-menu-inline .ant-menu-item-group-title { + padding-left: 56px; + } + a[disabled] { color: #ccc; } @@ -99,10 +97,6 @@ a { display: none; } -.page-wrapper { - background: #f0f2f5; -} - .drawer-content { padding: 40px 0; } diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less index 4267a22288..4c8d1d5ef4 100644 --- a/site/theme/static/footer.less +++ b/site/theme/static/footer.less @@ -1,22 +1,42 @@ +@import './colors'; + +@padding-space: 114px; + +footer.dark { + background-color: #000; + color: rgba(255, 255, 255, 0.65); + a { + color: #fff; + } + h2 { + color: rgba(255, 255, 255, 1); + & > span { + color: rgba(255, 255, 255, 1); + } + } + .bottom-bar { + border-top: 1px solid rgba(255, 255, 255, 0.25); + overflow: hidden; + } +} + footer { + border-top: 1px solid @border-color; clear: both; font-size: 12px; background: #fff; position: relative; - z-index: 1; + z-index: 100; color: @text-color; box-shadow: 0 1000px 0 1000px #fff; - ul { - overflow: hidden; - margin: 0 2%; - list-style: none; - li { - float: left; - width: 25%; - padding: 24px 2%; + .ant-row { + text-align: center; + .footer-center { + display: inline-block; + text-align: left; > h2 { font-size: 14px; - margin: 0 auto 16px; + margin: 0 auto 24px; font-weight: 500; position: relative; > .anticon { @@ -28,8 +48,30 @@ footer { } } > div { - margin-bottom: 8px; + margin: 12px 0; } } } + .footer-wrap { + position: relative; + padding: 86px @padding-space 70px @padding-space; + } + .bottom-bar { + border-top: 1px solid @border-color; + text-align: right; + padding: 20px @padding-space; + margin: 0; + line-height: 24px; + a { + color: rgba(255, 255, 255, 0.65); + &:hover { + color: #fff; + } + } + .build-tool { + text-align: left; + width: 200px; + margin: 0 auto; + } + } } diff --git a/site/theme/static/header.less b/site/theme/static/header.less index 82d45253d3..10ac0ffa7d 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -1,12 +1,11 @@ -@header-height: 80px; +@header-height: 64px; #header { transition: opacity 0.5s; background: #fff; - height: @header-height; - margin-bottom: 24px; - padding: 0 48px; - width: 100%; + box-shadow: 0 2px 8px rgba(240, 241, 242, 65); + position: relative; + z-index: 10; &.home-nav-bottom { background: rgba(255, 255, 255, 0.9); @@ -29,25 +28,27 @@ } #logo { + overflow: hidden; + padding-left: 40px; float: left; - height: 80px; - line-height: 80px; -} + height: @header-height; + line-height: @header-height; + text-decoration: none; -#logo img { - height: 80px; - line-height: 80px; - width: 40px; - margin-right: 8px; -} - -#logo span { - float: right; - font-size: 16px; - font-family: 'Raleway', 'Hiragino Sans GB', sans-serif; - height: 80px; - line-height: 80px; - text-transform: uppercase; + img { + height: @header-height; + line-height: @header-height; + width: 32px; + margin-right: 16px; + } + span { + float: right; + font-size: 14px; + font-family: 'Raleway', 'Hiragino Sans GB', sans-serif; + height: @header-height; + line-height: @header-height; + text-transform: uppercase; + } } #search-box { @@ -55,13 +56,19 @@ float: left; height: 22px; line-height: 22px; - padding-left: 30px; - margin: 29px auto 0; + padding-left: 16px; + margin: 20px auto 0; +} + +#search-box .anticon { + color: #ced4d9; + position: relative; + top: 0.5px; } #search-box .ant-select { font-size: 14px; - margin-top: -3px; + margin-top: -5px; width: 200px; } @@ -78,13 +85,14 @@ .header-lang-button, .version { float: right; - margin-top: 29px; + margin-top: 20px; margin-left: 10px; } .header-lang-button { color: @text-color; border-color: @border-color-base; + margin-right: 40px; } .version { @@ -98,16 +106,33 @@ font-family: Lato, @font-family; } -#nav li { - height: @header-height; - line-height: @header-height; - min-width: 72px; - text-align: center; - border-bottom-width: 3px; +#nav { + &.ant-menu-horizontal { + border-bottom: none; - &.ant-menu-item-selected a { - color: @primary-color; - font-weight: bold; + & > .ant-menu-item { + height: @header-height; + line-height: @header-height; + min-width: 72px; + border-top: 2px solid transparent; + + &:hover { + border-top: 2px solid @primary-color; + border-bottom: 2px solid transparent; + } + } + + & > .ant-menu-item-selected { + border-top: 2px solid @primary-color; + border-bottom: 2px solid transparent; + a { + color: @primary-color; + } + } + } + + & > .ant-menu-item { + text-align: center; } } diff --git a/site/theme/static/highlight.less b/site/theme/static/highlight.less index c7ae31e975..b8b8a83772 100644 --- a/site/theme/static/highlight.less +++ b/site/theme/static/highlight.less @@ -8,11 +8,11 @@ pre code { display: block; background: white; color: @text-color; - line-height: 1.7; + line-height: 2; border: 1px solid #e9e9e9; - padding: 10px 15px; - border-radius: @border-radius-base; - font-size: 13px; + padding: 16px 32px; + border-radius: @border-radius-sm; + font-size: @font-size-base; white-space: pre; font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } @@ -21,7 +21,6 @@ code[class*="language-"], pre[class*="language-"] { color: black; background: none; - text-shadow: 0 1px white; font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; direction: ltr; text-align: left; @@ -66,8 +65,8 @@ code[class*="language-"] ::selection { /* Code blocks */ pre[class*="language-"] { - padding: 1em; - margin: 1.2em 0; + padding: 12px 20px; + margin: 16px 0; overflow: auto; } diff --git a/site/theme/static/index.less b/site/theme/static/index.less index 9e2dd00746..266eefac6e 100644 --- a/site/theme/static/index.less +++ b/site/theme/static/index.less @@ -1,3 +1,4 @@ +@import '~antd/lib/style/v2-compatible-reset.less'; @import '../../../components/style/themes/default.less'; @import './common'; @import './header'; diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index 3879c71b64..122486ca98 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -1,7 +1,7 @@ .markdown { color: @text-color; font-size: 14px; - line-height: 1.8; + line-height: 2; } .highlight { @@ -9,21 +9,22 @@ } .markdown img { - vertical-align: middle; - max-width: 100%; + max-width: ~"calc(100% - 32px)"; +} + +.markdown p > img { + margin: 2.4em 1em; + box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } .markdown h1 { color: @heading-color; font-weight: 500; - line-height: 40px; - margin-bottom: 24px; + margin-bottom: 20px; margin-top: 8px; font-family: Lato, @font-family; .subtitle { - font-weight: normal; - font-size: 90%; margin-left: 12px; } } @@ -40,8 +41,15 @@ clear: both; } -.markdown h1 { font-size: 28px; } -.markdown h2 { font-size: 22px; } +.markdown h1 { + font-size: 30px; + line-height: 38px; +} +.markdown h2 { + font-size: 24px; + line-height: 32px; +} + .markdown h3 { font-size: 18px; } .markdown h4 { font-size: 16px; } .markdown h5 { font-size: 14px; } @@ -60,11 +68,6 @@ margin: 1em 0; } -.markdown ul, -.markdown ol { - padding: 0; -} - .markdown ul > li { list-style-type: circle; margin-left: 20px; @@ -95,7 +98,7 @@ } .markdown pre { - border-radius: @border-radius-base; + border-radius: @border-radius-sm; background: #f7f7f7; font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } @@ -105,21 +108,21 @@ background: #f7f7f7; margin: 0; padding: 0; - font-size: 13px; + font-size: @font-size-base; color: @text-color; overflow: auto; } .markdown strong, .markdown b { - font-weight: 600; + font-weight: 500; } .markdown > table { border-collapse: collapse; border-spacing: 0; empty-cells: show; - border: 1px solid #e9e9e9; + border: 1px solid @border-color-split; width: 100%; margin: 8px 0 16px; } @@ -127,13 +130,13 @@ .markdown > table th { white-space: nowrap; color: #5c6b77; - font-weight: 600; + font-weight: 500; } .markdown > table th, .markdown > table td { - border: 1px solid #e9e9e9; - padding: 8px 16px; + border: 1px solid @border-color-split; + padding: 16px 24px; text-align: left; } @@ -143,8 +146,8 @@ .markdown blockquote { font-size: 90%; - color: #999; - border-left: 4px solid #e9e9e9; + color: @text-color-secondary; + border-left: 4px solid @border-color-split; padding-left: 0.8em; margin: 1em 0; } @@ -170,9 +173,10 @@ margin-left: 10px; height: 12px; text-decoration: none; + font-weight: 400; i { - color: #999; + color: @text-color-secondary; &:hover { color: @primary-color; @@ -201,9 +205,9 @@ } .markdown.api-container table { - font-size: 13px; + font-size: @font-size-base; + line-height: @line-height-base; td:first-child { - background: #fcfcfc; font-weight: 500; width: 20%; font-family: "Lucida Console", Consolas, Menlo, Courier, monospace; diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less index fdbeae444b..79ba7f277b 100644 --- a/site/theme/static/page-nav.less +++ b/site/theme/static/page-nav.less @@ -2,7 +2,8 @@ position: absolute; bottom: 0; left: 0; - width: 100%; + width: ~"calc(100% - 194px - 64px)"; + margin-left: 64px; overflow: hidden; font-size: 14px; border-top: 1px solid @border-color-split; diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index b33bb2d7ba..aa1ba0812d 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -1,27 +1,50 @@ +@import "~antd/lib/style/themes/default.less"; + .nav-phone-icon { display: none; position: absolute; right: 30px; - top: 32px; + top: 25px; z-index: 1; width: 16px; height: 22px; cursor: pointer; } -@media only screen and (min-width: 0) and (max-width: 1280px) { +@media only screen and (min-width: 1440px) and (max-width: 1599px) { + .main-wrapper > .ant-row > .ant-col-xl-5 { + width: 274px; + } + + #header .ant-row .ant-col-xl-5 { + width: 274px; + } +} + +@media only screen and (max-width: 1280px) { .en-us #search-box { display: none; } } -@media only screen and (min-width: 0) and (max-width: 1180px) { - .zh-cn #search-box { +@media only screen and (max-width: @screen-xl) { + #search-box { display: none; } + #logo { + padding: 0 40px; + } + .banner-wrapper .banner-title-wrapper { + h1 { + font-size: 36px; + } + p { + font-size: 16px; + } + } } -@media only screen and (min-width: 0) and (max-width: 992px) { +@media only screen and (max-width: @screen-lg) { #search-box { display: none; } @@ -39,14 +62,6 @@ margin: 10px 0; } - a#logo { - width: 150px; - margin-left: auto; - margin-right: auto; - float: none; - display: block; - } - .banner-entry { position: relative; top: 30px; @@ -124,7 +139,7 @@ float: none; } div.version { - margin: 32px auto 16px; + margin: 16px auto; float: none; } .ant-popover-inner { @@ -137,7 +152,7 @@ display: inline-block; } .ant-btn { - margin: 32px 10% 0 0; + margin: 16px 10% 0 0; } } } @@ -153,8 +168,8 @@ } ul#nav li { - line-height: 60px; - height: 60px; + line-height: 40px; + height: 40px; padding: 0 !important; border: 0; a { diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less index 0d5dfb7ac2..7465c24e01 100644 --- a/site/theme/static/toc.less +++ b/site/theme/static/toc.less @@ -1,23 +1,18 @@ .toc { - font-size: 14px; - margin: 24px 0; - border-left: 1px solid #e9e9e9; + font-size: 12px; + margin: 16px 0; + padding-left: 0; + border-left: 1px solid #ebedf0; list-style: none; } -.markdown .toc { - background: #fbfbfb; - border-left: 2px solid #eee; -} - -.toc > ul { - padding: 8px 0; +ul.toc > li { list-style: none; -} - -.toc > ul li { - list-style: none; - margin: 0; + margin-left: 0; + padding-left: 0; + &:not(:last-child) { + margin-bottom: 16px; + } } .toc li > ul { @@ -32,7 +27,9 @@ transition: all 0.3s ease; white-space: nowrap; overflow: hidden; + text-overflow: ellipsis; color: @text-color; + width: 110px; } .toc a:hover { @@ -48,21 +45,15 @@ position: absolute; top: 8px; right: 20px; -} - -.demos-anchor { - color: #aaa; - font-size: 12px; - margin: -4px 0 0; - background-color: #fff; - padding: 0; - list-style: none; - a { - padding-left: 8px; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 110px; + .ant-affix { + background: #fff; + } +} +.toc-affix-bottom { + position: absolute; + bottom: 88px; + right: 20px; + .ant-affix { + background: #fff; } } diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx index b9975f1eca..378008e67b 100644 --- a/site/theme/template/Content/Article.jsx +++ b/site/theme/template/Content/Article.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import DocumentTitle from 'react-document-title'; import { getChildren } from 'jsonml.js/lib/utils'; -import { Timeline, Alert } from 'antd'; +import { Timeline, Alert, Affix } from 'antd'; import delegate from 'delegate'; import EditButton from './EditButton'; import { ping } from '../utils'; @@ -102,7 +102,13 @@ export default class Article extends React.Component { } { (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : -
{props.utils.toReactComponent(content.toc)}
+ + { + props.utils.toReactComponent( + ['ul', { className: 'toc' }].concat(getChildren(content.toc)) + ) + } + } { this.getArticle(props.utils.toReactComponent( diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index a6368bc0d1..eb52076235 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -79,7 +79,7 @@ export default class ComponentDoc extends React.Component {
-
    +
      {jumper}
    diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 9d7533fc6f..686a39b50e 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -221,6 +221,7 @@ export default class MainContent extends React.Component { }); const menuChild = ( {menuChild} ) : ( - + {menuChild} ) } - + { props.demos ? : @@ -257,7 +258,7 @@ export default class MainContent extends React.Component { diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx index 6025cc633f..7604ce3c3b 100644 --- a/site/theme/template/Home/index.jsx +++ b/site/theme/template/Home/index.jsx @@ -25,6 +25,7 @@ function getStyle() { } #header { position: fixed; + width: 100%; z-index: 999; background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid transparent; diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx index 1074fc5f61..01b8796e82 100644 --- a/site/theme/template/Layout/Footer.jsx +++ b/site/theme/template/Layout/Footer.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; -import { Modal, Icon, message } from 'antd'; +import { Modal, message, Row, Col } from 'antd'; import { Link } from 'bisheng/router'; import { isLocalStorageNameSupported, loadScript } from '../utils'; import ColorPicker from '../Color/ColorPicker'; @@ -12,7 +12,7 @@ class Footer extends React.Component { this.lessLoaded = false; this.state = { - color: '#108ee9', + color: '#1890ff', }; } @@ -85,160 +85,198 @@ class Footer extends React.Component { render() { return ( - ); } diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index bcbf6a8386..45191e7204 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -232,14 +232,15 @@ export default class Header extends React.Component { ) : null} - + - logo + logo Ant Design - +